﻿
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
<TITLE>UI Layout Plug-in - Documentation</TITLE>
<LINK rel="stylesheet" type="text/css"
	href="UILayoutPlug-in%20-%20Documentation_files/global.css">
<LINK rel="stylesheet" type="text/css"
	href="UILayoutPlug-in%20-%20Documentation_files/documentation.css">
<!--[if lte IE 7]>
		<style type="text/css"> body { font-size: 85%; } </style>
	<![endif]-->
<!-- REQUIRED scripts for layout widget -->
<SCRIPT type="text/javascript"
	src="UILayoutPlug-in%20-%20Documentation_files/jquery-latest.js"></SCRIPT>

<SCRIPT type="text/javascript"
	src="UILayoutPlug-in%20-%20Documentation_files/jquery-ui-latest.js"></SCRIPT>

<SCRIPT type="text/javascript"
	src="UILayoutPlug-in%20-%20Documentation_files/jquery.layout-latest.js"></SCRIPT>

<SCRIPT type="text/javascript"
	src="UILayoutPlug-in%20-%20Documentation_files/global.js"></SCRIPT>

<SCRIPT type="text/javascript">
	var pageLayout;

	$(document)
			.ready(
					function() {
						// create page layout
						pageLayout = $('body')
								.layout(
										{
											scrollToBookmarkOnLoad : false // handled by custom code so can 'unhide' section first
											,
											defaults : {},
											north : {
												size : "auto",
												spacing_open : 0,
												closable : false,
												resizable : false
											},
											west : {
												size : 250,
												spacing_closed : 22,
												togglerLength_closed : 140,
												togglerAlign_closed : "top",
												togglerContent_closed : "C<BR>o<BR>_<BR>_BR>t$BR>etBR>nt>e<Ba_$ta_$tae_$ta_$ta_$ta_$ta_$tan_$ta_$ta_$ta_$ta_$ta_$tat_$ta_$ta_$ta_$ta_$ta_$ta_$tas",
												togglerTip_closed : "Open & Pin Contents",
												sliderTip : "Slide Open Contents",
												slideTrigger_open : "mouseover"
											}
										});

						// goto
</SCRIPT>

<META name="GENERATOR" content="MSHTML 9.00.8112.16448">
</HEAD>
<BODY>
	<DIV class="ui-layout-north">
		<DIV id="logo">jQuery UI Layout Plug-in</DIV>
		<DIV id="navigation">
			<A href="http://layout.jquery-dev.net/index.cfm">HOME</A><A
				href="http://layout.jquery-dev.net/demos.cfm">DEMOS</A><A
				href="http://layout.jquery-dev.net/downloads.cfm">DOWNLOADS</A><A
				class="current"
				href="http://layout.jquery-dev.net/documentation.cfm">DOCUMENTATION</A><A
				href="http://layout.jquery-dev.net/tips.cfm">TIPS</A><A
				href="http://layout.jquery-dev.net/plugin.cfm">PLUGIN</A><A
				href="http://layout.jquery-dev.net/issues.cfm">ISSUES</A><A
				href="http://groups.google.com/group/jquery-ui-layout"
				target="_blank">DISCUSSION</A>
		</DIV>
	</DIV>
	<DIV class="ui-layout-center content">
		<H1 id="top">UI Layout Documentation</H1>
		<DIV
			style="margin: 0px 0px 1ex 1em; padding: 7px 10px; border: 1px solid rgb(187, 187, 187); float: right;">
			<FORM style="margin: 0px; padding: 0px;"
				action="http://groups.google.com/group/jquery-ui-layout/boxsubscribe">
				<TABLE border="0" cellSpacing="0" cellPadding="5">
					<TBODY>
						<TR>
							<TD><IMG alt=""
								src="UILayoutPlug-in%20-%20Documentation_files/groups_logo_sm.gif"
								width="140" height="30"></TD>
						</TR>
						<TR>
							<TD style="font-size: 1em; font-weight: bold;">Subscribe to
								jQuery UI Layout</TD>
						</TR>
						<TR>
							<TD><LABEL style="vertical-align: middle;" for="email">Email:</LABEL><INPUT
								style="width: 20ex;" id="email" name="email" size="20"
								type="text"><INPUT name="sub" value="GO" type="submit"></TD>
						</TR>
						<TR>
							<TD><A
								href="http://groups.google.com/group/jquery-ui-layout">Visit
									the UIOP Layout group</A></TD>
						</TR>
					</TBODY>
				</TABLE>
			</FORM>
		</DIV>
		<P>
			These instructions are for <B>the current release version, 1.2.0</B>.
			For assistance with beta or release candidate versions, or for
			questions or problems not addressed by this documentation or <A
				href="http://layout.jquery-dev.net/tips.cfm">the tips page</A>,
			visit the UI Layout discussion group:
		</P>
		<H3>Overview</H3>
		<P>UI Layout creates a 'page-layout' that has auto-sizing 'center
			pane' surrounded by up to four collapsible and resizable 'border
			panes' (north, south, east &amp; west). It can also create multiple
			headers &amp; footers inside each pane.</P>
		<p>UI Layout创建了这样一种页面布局，它由一个可自动尺寸自适应的中心面板(center
			pane)和环绕在中心面板四周的四个可拆装的、可变尺寸的区域面板(border
			panes)，它们分别是东，南，西，北(north,south, east,
			west)。另外它还可以在各自的面板中创建多个头(header)和底(footer)。</p>
		<P>For more complex layouts, you can nest layouts within layouts.
			Or use an iframe as a pane to create a 'sub-form' that can have its
			own layout. The possibilities are unlimited - from simple fixed
			headers or sidebars to rich applications.</P>
		<p>如果需要更复杂的布局，你能够在一个布局中嵌套布局，或者使用iframe作为面板并在其上穿件自己的布局。各种可能的组合是无限的，从最简单的头部区域定义或者边条到富客户应用都是可行的。</p>
		<P>Layouts are created from existing elements (divs, iframes,
			etc), so will degrade gracefully. You can even make some regions
			invisible, so they simple will not show if the user does not have
			Javascript enabled.</P>
		<p>布局建立在各种已存在的页面元素上(div，iframes.....)，从而布局可以被很优雅的进行拆机、组合。你甚至能够让某些区域不可见，由此如果用户没有javascript支持，它们就可以简单的不被显示出来。</p>

		<!-- DONE! - leave note here for future re-use
	<P><STRONG>NOTE:</STRONG> <B>The new options added in version <STRONG>1.1.1</STRONG> 
		will be added to this document over the next couple of days.</B>
		These include options for hotkeys and text inside toggler buttons.</P>
-->
		<P class="bold">
			<A onclick="return openAllSections()" href="#">Open All
				Sections(展开所有章节)</A> &nbsp; <A onclick="return closeAllSections()"
				href="#">Close All Sections(关闭所有章节)</A>
		</P>
		<HR>

		<H2 id="Depends_on">Depends on(依赖)</H2>
		<DIV class="collapsible">
			<P class="noBottomMargin bold">Required(必须)</P>
			<UL>
				<LI>jquery.js</LI>
				<LI>ui.core.js</LI>
			</UL>
			<P class="noBottomMargin bold">Optional(可选)</P>
			<UL>
				<LI>ui.draggable.js – to enable resizing capability(使拖动改变尺寸生效)</LI>
				<LI>effects.core – for open/close animation effects(开、闭动画效果)</LI>
				<LI>effects.slide.js – for 'slide' effect(滑动、幻灯效果)</LI>
				<LI>effects.drop.js – for 'drop' effect(拖拉效果)</LI>
				<LI>effects.scale.js – for 'scale' effect(比例缩放效果)</LI>
			</UL>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Browsers">Supported Browsers(支持的浏览器)</H2>
		<DIV class="collapsible">
			<P>
				We're unaware of <I>any</I> browsers that do not work, but only
				these have been tested:
			</P>
			<p>我们不知道在那些浏览器下我们的组件不能正常工作，但是以下的浏览器都是经过验证能够正常工作的。</p>
			<UL>
				<LI>Internet Explorer 6.x / 7.x</LI>
				<LI>Firefox 2.x / 3.x</LI>
				<LI>Safari 3.1</LI>
				<LI>Opera 9.5</LI>
				<LI>Google Chrome</LI>
			</UL>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Demos">Demos(演示)</H2>
		<DIV class="collapsible">
			<P>After viewing a demo, click 'Back' to return to this page</P>
			<UL>
				<LI><A href="http://layout.jquery-dev.net/demos/example.html">example.html</A>
					— a minimalist example (see source below)</LI>
				<LI><A href="http://layout.jquery-dev.net/demos/simple.html">simple.html</A>
					— a simple, but complete layout</LI>
				<LI><A href="http://layout.jquery-dev.net/demos/complex.html">complex.html</A>
					— utilizes many features and has a 'nested layout'</LI>
			</UL>
			<P>
				SEE MORE demos &amp; samples on our <A
					href="http://layout.jquery-dev.net/demos.cfm">demos page</A>.
			</P>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Example">Example(例子)</H2>
		<DIV class="collapsible">
			<P>This is a minimalist layout with all 4 border-panes, with
				basic styling added for demo purposes (applyDefaultStyles = true):</P>
			<p>以下是一个包括所有四个区域面板的布局的最简写法，它使用了用于演示目的的基础样式(applyDefaultStyles =
				true):</p>
			<CODE>
				<PRE>&lt;html&gt;
&lt;head&gt;
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script src="jquery.layout.js"&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function () {
        $('body').layout({ applyDefaultStyles: true });
    });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="ui-layout-center"&gt;Center&lt;/div&gt;
&lt;div class="ui-layout-north"&gt;North&lt;/div&gt;
&lt;div class="ui-layout-south"&gt;South&lt;/div&gt;
&lt;div class="ui-layout-east"&gt;East&lt;/div&gt;
&lt;div class="ui-layout-west"&gt;West&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</PRE>
			</CODE>
			<P>
				VIEW this example page: <A
					href="http://layout.jquery-dev.net/demos/example.html">example.html</A>
			</P>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Terminology">Terminology(名词解释)</H2>
		<DIV class="collapsible">
			<P>To help you understand layout options and instructions, here
				is the terminology used...</P>
			<p>为了能够帮助您更好的理解布局组件的选项与结构，以下是使用的名词术语的解释：</p>
			<H5 id="Container">
				<B>Container(容器)</B>
			</H5>
			<BLOCKQUOTE>
				<P>The layout container is the element specifed when creating a
					layout. Most commonly this will be the 'body' element, but you
					could put a layout inside any block-element, including inside a
					'pane' of another layout (a nested layout).</P>
				<p>布局容器指的是在创建布局对象时需要进行指定的元素，大多数情况下这个容器可能是body元素，但是实际上你可以指定任何一个块元素（block-element）作为容器，在其内部创建布局，这里指的容器也包括了一个已有布局对象的任何一个面板（pane），也就是说创建了一个嵌入布局。</p>
				<P>
					Here is an example that creates a layout covering the entire page
					('body'), and a second layout that is <I>inside</I> the 'center
					pane' of the first layout:
				</P>
				<p>下面的例子演示了以整个页面('body')为容器作为容器创建第一个布局对象，然后在第一个布局对象的中心面板('center
					pane')中创建第二个布局对象：</p>

				<CODE>
					<PRE>$("body").layout();
$("body &gt; .ui-layout-center").layout();
</PRE>
				</CODE>
				<P>
					You can see a sample of this layout in the <A
						href="http://layout.jquery-dev.net/demos/complex.html">complex.html
						demo page</A>.
				</P>
				<P>
					你能够在如下演示页面看到这样的布局方式 <A
						href="http://layout.jquery-dev.net/demos/complex.html">复杂布局演示页面</A>.
				</P>

			</BLOCKQUOTE>
			<H5 id="Panes">
				<B>Panes(面板)</B>
			</H5>
			<BLOCKQUOTE>
				<P>
					When a border-layout is created, it has up to five regions:
					'north', 'south', 'west', 'east' and 'center'. (Only a center
					region is required) These regions/elements are referred to as '<STRONG>panes</STRONG>'
					- as in window-panes. Most options apply only to the '<STRONG>border-panes</STRONG>',
					meaning all except the center-pane.
				</P>
				<P>
					当一个区域布局被创建，它由五个区域组成：北、南、西、东、中( 'north', 'south', 'west', 'east' and
					'center'). (其中只有中心区域是必须的) 这些区域或者叫做元素被称为'<STRONG>面板(panes)</STRONG>'
					- 就像窗户的分格. 绝大多数的选择项只是应用到 '<STRONG>边界区域面板(border-panes)</STRONG>',
					意思是指除了中心面板(center-pane)的其他面板.
				</P>
				<P>
					<B>NOTE: All panes are existing DIVs (or other elements) in
						your HTML mark-up</B>— panes are NOT auto-generated. The pane elements
					must be direct 'children' of the container element - i.e., not
					nested inside other elements. There is an exception for nesting
					inside a FORM, or if you use an ID as a selector instead of the
					default class-selectors.
				</P>

				<p>
					<b>注意:所有面板都应该是你的HTML代码中已经存在的DIV(或者其他元素)</b>—
					面板是不会被自动生成的。面板元素必须是容器元素的直接子孙 , 而不能是包含在其他元素内部的元素.
					也存在一个例外，如包含在一个表单(FORM)内的元素，, 或者你使用ID作为选择器代替默认的CSS class选择器.
				</p>
				<P>
					<B>TIP</B>: Using an IFRAME as a pane works great! Since the iframe
					auto-sizes, you will never again have TWO vertical scrollbars on
					your page. This website's <A
						href="http://layout.jquery-dev.net/discuss.cfm">Discussion</A> and
					<A href="http://layout.jquery-dev.net/issues.cfm">Issues</A> pages
					use a layout with an iframe to incorporate pages from other
					websites.
				</P>

				<p>
					<b>提示</b>: 使用IFRAME作为面板工作时非常正常的也是个不错的选择!
					由于iframe是尺寸自适应的，故而你就不再需要为出现两重纵向滚动条而烦恼了. 如下的网址的This website's <a
						href="http://layout.jquery-dev.net/discuss.cfm">Discussion</a> and
					<a href="http://layout.jquery-dev.net/issues.cfm">Issues</a>
					页面就是使用iframe作为布局元素展示其他网站页面。
				</p>
				<P>
					In this document, when '<B>PANE</B>' is written in uppercase, it
					means <I>one of</I> the panes. For example:
					<TT>"ui-layout-PANE"</TT>
					means
					<TT>"ui-layout-north"</TT>
					, or
					<TT>"ui-layout-center"</TT>
					, etc.
				</P>

				<p>
					在本文中，当 '<b>PANE</b>' 以大写字母方式书写时，意味着它是区域布局的面板元素之一。 例如:
					<tt>"ui-layout-PANE"</tt>
					指的是
					<tt>"ui-layout-north"</tt>
					, 或者
					<tt>"ui-layout-center"</tt>
					, 以及其他类似情况.
				</p>
				<P>
					The auto-generated resizer-bar and toggler-button elements (DIVs)
					are 'attached' to their correpsonding border-pane and have related
					classNames, for example:
					<TT>"ui-layout-resizer-west"</TT>
					is the resizer-bar for the west-pane:
					<TT>"ui-layout-pane-west"</TT>
					.
				</P>

				<p>
					边界面板都具有它们自己的resizer-bar和 toggler-button，此二者都是以
					(DIV)的形式存在，并会被自动创建到它们所对应的面板上，而且还会被冠以相对应的CSS class名(className), 例如:
					<tt>"ui-layout-resizer-west"</tt>
					就代表着面板西(
					<tt>"ui-layout-pane-west"</tt>
					)所对应的 resizer-bar: .
				</p>
			</BLOCKQUOTE>
			<H5 id="Pane_Spacing">
				<B>Pane Spacing(面板间距)</B>
			</H5>
			<BLOCKQUOTE>
				<P>'Pane spacing' refers to the space on the 'inside edge' of a
					border-pane. For the north pane, this is the bottom edge, for the
					west pane, it's the right edge. A pane can have -0- spacing, which
					means no space between it and the adjacent panes. If a pane has no
					spacing, then it cannot have a resizer-bar or toggler-button.</P>

				<p>面板间距指的是边界面板的内边界(inside edge)所对应的的间隔区域. 对于北面板而言，指的就是底部边界，对于西面板而已，指的就是右边界。一个面板的间距可以为0，这就意味着在它和比邻的面板之间没有任何的间距，如果面板没有间距那就意味着此面板没有resizer-bar或者toggler-button.</p>
				<P>
					Spacing can be different when the pane is open than when closed:
					Each pane has options for
					<TT>spacing_open</TT>
					and
					<TT>spacing_closed</TT>
				</P>
				<P>
					面板在开或者闭的不同状态时间距可以使不同的，每个边界面板都有各自的的选项针对
					<TT>spacing_open</TT>
					和
					<TT>spacing_closed</TT>
				</P>
			</BLOCKQUOTE>
			<H5 id="Resizer">
				<B>Resizer / Resizer-bar(尺寸调节与与尺寸调节条)</B>
			</H5>
			<BLOCKQUOTE>
				<P>A DIV element is created that fills the 'spacing' between
					panes. The resizer DIV is always the full width of the spacing and
					the full height of the pane. Panes can have different spacing set
					for open and closed states - the resizer-bar is automatically
					resized and repositioned each time a pane is opened or closed.</P>
				<P>尺寸调节是一个 DIV元素，它被创建并填充到面板间的间距空间中。它总是占满间距的全部宽度和面板的全部高度。面板在开、闭状态时可以设定不同的间距，尺寸调节条会自动进行自身的尺寸调节与重定位以适应面板的开、闭操作。</P>					
			</BLOCKQUOTE>
			<H5 id="Slider">
				<B>Slider / Slider-bar(滑动条)</B>
			</H5>
			<BLOCKQUOTE>
				<P>
					Actually there is not a separate 'slider-bar' element - the
					resizer-bar acts as a slider-bar when the pane is 'closed'.
					Clicking or hovering the resizer/slider bar will 'slide a pane
					open', meaning it <I>slides over top</I> of the adjacent panes
					without resizing them. When the mouse moves off the pane, it
					automatically slides closed again. This feature can be customized
					or disabled for each pane in the layout options.
				</P>
				<P>
					实际上并不存在独立的滑动条('slider-bar')元素,当面板处在关闭状态时尺寸调节条(resizer-bar)就是滑动条。当鼠标点击它或者鼠标符号悬浮在其上时，面板就会滑动展开,也就是说面板活动展开并悬浮于比邻面板的
					上层而并不是对它进行尺寸调节。当鼠标移出此面板的范围，此面板就会自动的滑动关闭，此特性可被布局模型的各个面板所定制或者取消。
				</P>
			</BLOCKQUOTE>
			<H5 id="Toggler">
				<B>Toggler / Toggler-button(切换)</B>
			</H5>
			<BLOCKQUOTE>
				<P>
					A DIV element is created <I>inside</I> the resizer DIV. This DIV
					acts as a 'toggler-button' to open and close a pane. You can make
					this look like anything you want by adding color, borders, and/or a
					background-image to it. Or you can insert text, images or custom
					HTML inside the toggler using the togglerContent options.
				</P>
				<P>
					切换按钮是创建在尺寸调节条DIV之中的一个DIV元素。此 DIV作为切换按钮，功用就是用以打开或者关闭面板。在此DIV上你可以做任何事，颜色、边框、背景图片、文本、或者使用<b>togglerContent</b>选项加入你定制的Html内容.
				</P>
				<P>
					The toggler button always fills the full width of the resizer-bar (<I>inside</I>
					resizer borders). Toggler length is an option, which can be either
					a pixel-value, like 50, or it can be "100%" (or -1). If set to
					100%, the toggler completely covers the resizer-bar (except for
					resizer borders). Note that this prevents 'resizing' when the pane
					is open, and 'sliding open' when the pane is closed.
				</P>
				<P>
					切换按钮总会占满尺寸调节条的整个宽度(在调节条内部). 切换按钮的长度是可选择定义的，它能够定义为像素值(pixel),例如50，
					或者能被定义为百分百，例如100%,或者-1.如果长度被设定为100%，则会覆盖整个调节条(除了调节条的边框)。
					 注意在切换按钮上，无论面板是开状态下的调节尺寸功能以及面板关闭状态下的划开功能都是被阻止的，也就是不响应。
				</P>
				<P>Each pane can have different Toggler lengths, and these can
					be different depending on whether the pane is open or closed, for
					example:</P>
				<P>不同的面板可以具有自己不同尺寸的切換按鈕並且在面板的开、闭不同状态下按钮可以被设定为不同的长度, 例如:</P>
				<CODE>
					<PRE>,   togglerLength_open:         50
,   togglerLength_closed:       "100%"
,   north__togglerLength_open:  "100%"
,   south__togglerLength_open:  "100%"
</PRE>
				</CODE>
			</BLOCKQUOTE>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Properties_Methods">Layout Properties &amp; Methods(布局对象的属性与方法)</H2>
		<DIV class="collapsible">
			<P>布局对象是通过在容器上调用<b>layout</b>方法进行创建的，而且可以传递一组布局的属性设定(可选):</P>
			<CODE>
				<PRE>$('body').layout( [options] );
</PRE>
			</CODE>
			<P>如果一个布局对象实例被指定给一个对象指针(建议这样)...</P>
			<CODE>
				<PRE>var myLayout = $('body').layout();
</PRE>
			</CODE>
			<P>...则此布局实例对象的一组属性、方法、工具能被使用、调用、存取以对此实例进行控制或者查看:</P>
			<CODE>
				<PRE>
					<I>// init instance var</I>
var myLayout = $('body').layout();

<I>// read layout 'options'</I>
var is_west_resizable = myLayout.options.west.resizable;
var north_maxHeight   = myLayout.options.north.maxSize;

<I>// get layout 'state'</I>
var is_west_open = myLayout.state.west.isOpen;
var north_size   = myLayout.state.north.size;

<I>// layout methods</I>
myLayout.toggle("north");
myLayout.sizePane("west", 300);

<I>// layout utilities</I>
myLayout.addPinBtn("#myPinButton", "west");
myLayout.allowOverflow("north");
</PRE>
			</CODE>
			<H3 id="Properties">Properties(属性)</H3>
			<H5>
				<B>panes</B>
			</H5>
			<BLOCKQUOTE>
				这是一个面板对象数组 (panes.north, panes.south, etc). 每一个面板元素都已经被jQuery进行包裹。如果在布局中某个面板不存在，例如没有南部面板，则
				<TT>panes.south == false</TT>，而不会被处理成为jQuery元素。
			</BLOCKQUOTE>
			<H5>
				<B>options</B>
			</H5>
			<BLOCKQUOTE>
				
				
				一个哈希结构，它存储着所有用于创建布局的属性，它既包括了默认值也包括了用户自定义属性。属性会被以"Sub-Key"格式返回，关于这种格式请看下文中的相关介绍。
			</BLOCKQUOTE>
			
			<H5>
				<B>state</B>
			</H5>
			<BLOCKQUOTE>
				一个哈希结构，它存储了所有元素的尺寸，包括布局容器，这些尺寸包括了
				<TT>top, bottom, left, right</TT>的边框、填充，还有
				<TT>outerWidth, outerHeight, innerWidth, innerHeight</TT>
				.
				<CODE>
					<PRE>var containerWidth = myLayout.state.container.innerWidth;
var isWestOpen     = !myLayout.state.west.isClosed;

</PRE>
				</CODE>
				<P>
					SEE <A href="#Layout_State">Reading the Layout-State</A> for more
					information.
				</P>
			</BLOCKQUOTE>
			<H3 id="Methods">Methods</H3>
			<P>
				大部分的方法都需要指定一个面板，通常情况下会是一个边界面板，如:
				<TT>"north"</TT>
				,
				<TT>"south"</TT>
				,
				<TT>"east"</TT>
				or
				<TT>"west"</TT>
				.
			</P>
			<H5>
				<B>toggle(</B> pane <B>)</B>
			</H5>
			<BLOCKQUOTE>切换指定面板的开闭状态 -对它的当前状态取反。</BLOCKQUOTE>
			<H5>
				<B>open(</B> pane <B>)</B>
			</H5>
			<BLOCKQUOTE>
				Open the specified pane. If the pane is already open, nothing
				happens. If the pane is currently 'hidden' (not just 'closed'), then
				the pane will be unhidden <I>and</I> opened.
				展开指定的面板。如果指定的面板已经是展开的，则什么也不会发生。如果面板当下处于"隐藏"状态(不仅是关闭状态(closed)),则面板会显示出来并展开。
			</BLOCKQUOTE>
			<H5>
				<B>close(</B> pane <B>)</B>
			</H5>
			<BLOCKQUOTE>Close the specified pane. If the pane is
				already closed, nothing happens.
				关闭指定的面板，如果面板已经处于关闭状态，则什么也不会发生。
				</BLOCKQUOTE>
			<H5>
				<B>hide(</B> pane <B>)</B>
			</H5>
			<BLOCKQUOTE>Hide the specified pane. When a pane is
				hidden, it has no spacing or resizer-bar or toggler-button - it is
				completely invisible, as if it did not exist.
				隐藏指定的面板，当面板处于隐藏状态时，则面板是完全不可见的，当然也不会有间隔、拖拉条或者切换按钮，就像他它是完全不存在一样。
				</BLOCKQUOTE>
			<H5>
				<B>show(</B> pane, openPane = true <B>)</B>
			</H5>
			<BLOCKQUOTE>Un-hide the specified pane. Normally also
				opens the pane, but if you pass 'false' as the second parameter,
				then pane will un-hide, but be 'closed' (slider-bar and toggler now
				visible).
				使指定的面板从隐藏状态下显示出来。通常情况下也会展开此面板，如果你将第二个参数设置为'false'，则此面板会被展示出来但是会处于关闭状态(滑动条、切换按钮时可见的)。
				
				</BLOCKQUOTE>
			<H5>
				<B>sizePane(</B> pane, size_in_pixels <B>)</B>
			</H5>
			<BLOCKQUOTE>This sizes the pane in the direction it
				opens and closes - for north and south panes, size=outerHeight, for
				east and west panes, size=outerWidth. The pane will only resize
				within its minSize and maxSize limits.
				这个方法用于重新设置面板的尺寸、具体指的是面板所在方向上的，而且是在开、闭不同状态下的。如：南、北面板就是面板的外部高度，如东、西面板指的就是外部宽度了。面板尺寸调整只会在最大、最小值限定范围内变化。
				
				</BLOCKQUOTE>
			<H5>
				<B>resizeContent(</B> pane <B>)</B>
			</H5>
			<BLOCKQUOTE>
				Resizes the 'content container' inside the specified pane. Content
				is resized <I>automatically</I> when the pane is resized or opened,
				so this method only needs to be called manually if something
				'changes the height' of a header or footer element in the pane.
				<P>
					SEE <A href="#Content-Scrolling">Content Scrolling (Headers
						&amp; Footers)</A> for more information.
				</P>
				在指定面板内重新设定内容容器的尺寸，
				Resizes the 'content container' inside the specified pane. Content
				is resized <I>automatically</I> when the pane is resized or opened,
				so this method only needs to be called manually if something
				'changes the height' of a header or footer element in the pane.
				<P>
					SEE <A href="#Content-Scrolling">Content Scrolling (Headers
						&amp; Footers)</A> for more information.
				</P>
			</BLOCKQUOTE>
			<H5>
				<B>resizeAll()</B>
			</H5>
			<BLOCKQUOTE>
				Resizes the entire layout to fit its container. This method runs
				automatically for all layouts when the browser window is resized.
				<P>
					When a layout is <I>inside</I> another element (its 'container'),
					and that container-element can be 'sized' without resizing the
					entire window, then layout.resizeAll() should be called so the
					inner-layout will resize when its container resizes.
				</P>
				<P>In the example below, a 'resize callback' is added to the
					outerLayout.center pane because it is the container for the
					innerLayout:</P>
				<CODE>
					<PRE>outerLayout = $("body").layout({
    center__onresize: "innerLayout.resizeAll"
});

innerLayout = $("div.ui-layout-center").layout();
</PRE>
				</CODE>
			</BLOCKQUOTE>
			<H3 id="Utility_Methods">Utility Methods</H3>
			<H5 class="withNext">
				<B>addToggleBtn(</B> selector, pane <B>)</B>
			</H5>
			<H5 class="withNext">
				<B>addCloseBtn(</B> selector, pane <B>)</B>
			</H5>
			<H5 class="withNext">
				<B>addOpenBtn(</B> selector, pane <B>)</B>
			</H5>
			<H5 class="withNext">
				<B>addPinBtn(</B> selector, pane <B>)</B>
			</H5>
			<H5 class="withNext">
				<B>allowOverflow(</B> elem_or_pane <B>)</B>
			</H5>
			<H5>
				<B>resetOverflow(</B> elem_or_pane <B>)</B>
			</H5>
			<BLOCKQUOTE>
				SEE <B><A href="#Utilities">Tips, Tricks and Utilities</A></B> for
				details on these special utility methods.
			</BLOCKQUOTE>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Options">Options</H2>
		<DIV class="collapsible">
			<P>
				Layout options are passed when creating a layout. There are options
				to customize almost every aspect of a layout, <B>but all options
					are optional</B>. You can use the default options to create a fast and
				simple layout, or create a completely custom look for your
				application. Callback options can also help integrate a layout with
				your design.
			</P>
			<P>You can either pass the options inline:</P>
			<CODE>
				<PRE>$("body").layout({ option1: value, option2: value });
</PRE>
			</CODE>
			<P>OR it may be convenient to save them in a var and pass that:</P>
			<CODE>
				<PRE>var myOptions = { option1: value, option2: value };
$("body").layout( myOptions );
</PRE>
			</CODE>
			<P>There are 2 different formats you can use to specify options:</P>
			<UL>
				<LI><STRONG>Sub-Key format</STRONG> - ALL options are inside
					sub-keys</LI>
				<LI><STRONG>List format</STRONG> - no sub-keys - pane-specific
					options are 'prefixed'</LI>
			</UL>
			<H3 id="Sub-Key_Format">Sub-Key Format for Options</H3>
			<P>With this format, every option must be inside either the
				'defaults' sub-key or a sub-key for a specific 'pane'...</P>
			<P>
				These are the options for the 'Inner Layout' on the <A
					href="http://layout.jquery-dev.net/demos/complex.html">complex
					demo page</A>
			</P>
			<CODE>
				<PRE>$("body").layout({
   defaults: {
      fxName:               "slide"
   ,  fxSpeed:               "slow"
   ,  spacing_closed:        14
   ,  initClosed:            true
   }
,  north: {
      fxName:                "none"
   ,  spacing_closed:        8
   ,  togglerLength_closed:  "100%"
   }
,  south: {
      fxName:                "none"
   ,  spacing_closed:        8
   ,  togglerLength_closed:  "100%"
   }
});
</PRE>
			</CODE>
			<H3 id="List_Format">List Format for Options</H3>
			<P>
				List format uses prefixes to identify pane-specific options instead
				of separate sub-keys. The prefix is the pane's name and TWO
				underscores, eg:
				<TT>"north__fxName"</TT>
				. Options specified <I>without</I> a prefix (eg, fxName) are
				considered 'defaults'. You <I>can</I> also prefix default options -
				<TT>"defaults__fxName"</TT>
				- but the prefix is not necessary.
			</P>
			<P>These are the same options shown above, but in list format.
				List format allows options to be specified in any order, so related
				default &amp; pane-specific options are grouped together here:</P>
			<CODE>
				<PRE>$("body").layout({
   fxName:                       "slide"
,  fxSpeed:                      "slow"
,  north__fxName:                "none"
,  south__fxName:                "none"
,  spacing_closed:               14
,  north__spacing_closed:        8
,  south__spacing_closed:        8
,  north__togglerLength_closed:  "100%"
,  south__togglerLength_closed:  "100%"
,  initClosed:                   true
}
</PRE>
			</CODE>
			<H3 id="Option_Specificity">Option Specificity</H3>
			<P>
				Options specified for an individual 'pane' <I>always</I> override
				options specified as 'defaults'.
			</P>
			<P>If the north, south and east panes should be 'closed' when the
				layout is created - so only the west pane is open - then just 2
				options are needed:</P>
			<CODE>
				<PRE>initClosed:       true
west__initClosed: false
</PRE>
			</CODE>
			<P>
				This causes all panes <I>except west</I> to be closed when created.
			</P>
			<H3 id="Selector_Options">Selector Options</H3>
			<P>Options with 'selector' in their name - like 'contentSelector'
				- require a COMPLETE jQuery selector string. So if the selector is a
				className, start it with a period (.) - if the selector is an ID,
				start it with a pound sign (#). Any valid jQuery selector string can
				be used.</P>
			<H3 id="Class_Options">Class Options</H3>
			<P>
				Options with 'class' in their name - like 'togglerClass' - do NOT
				start with a period. The classNames specified are applied to the
				element, plus are used as a <I>root</I> for additional classNames.
				For example, if you set this options
			</P>
			<CODE>
				<PRE>togglerClass: "myToggler"
</PRE>
			</CODE>
			<P>This would generate ALL these classes for the toggler-button
				on the west-pane:</P>
			<CODE>
				<PRE>class="myToggler
       myToggler-west
       myToggler-open
       myToggler-west-open"
</PRE>
			</CODE>
			<P>When the west pane is closed, the last two classes would
				change to:</P>
			<CODE>
				<PRE>class="...
       myToggler-closed
       myToggler-west-closed"
</PRE>
			</CODE>
			<P>
				This provides total control of elements using CSS - you can apply <I>global</I>
				styles using "myToggler" or "myToggler-closed", and styles for <I>specific
					elements</I> using "myToggler-west" or "myToggler-west-open".
			</P>
			<P>
				<B>NOTE</B>: Use the default classes if you want to use a standard
				'Layout theme'. If you are using custom layout styles, then you can
				change the default class-names using the options.
			</P>
			<H3 id="List_of_Options">List of Options</H3>
			<P>
				Options can be set as 'defaults', which apply to ALL border-panes -
				or be set for specific panes (eg, "north"). There are a few options
				<I>cannot</I> be set as defaults, including 'paneSelector',
				'resizerCursor' and the pane-callback options.
			</P>
			<DIV style="width: auto; overflow: hidden;">
				<TABLE class="TOC" cellSpacing="0" cellPadding="0" width="100%">
					<TBODY>
						<TR class="rTitle">
							<TD colSpan="3">Basic Layout/Pane Options</TD>
						</TR>
						<TR class="r1">
							<TD width="33%"><A href="#Option_applyDefaultStyles">applyDefaultStyles</A></TD>
							<TD width="34%"><A href="#Option_scrollToBookmarkOnLoad">scrollToBookmarkOnLoad</A></TD>
							<TD width="33%"><A href="#Option_showOverflowOnHover">showOverflowOnHover</A></TD>
						</TR>
						<TR class="r0">
							<TD><A href="#Option_closable">closable</A></TD>
							<TD><A href="#Option_resizable">resizable</A></TD>
							<TD><A href="#Option_slidable">slidable</A></TD>
						</TR>
						<TR class="rTitle">
							<TD colSpan="3">Element Selectors Strings</TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_paneSelector">paneSelector</A></TD>
							<TD><A href="#Option_contentSelector">contentSelector</A></TD>
							<TD><A href="#Option_contentIgnoreSelector">contentIgnoreSelector</A></TD>
						</TR>
						<TR class="rTitle">
							<TD colSpan="3">Auto-generated Classnames</TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_paneClass">paneClass</A></TD>
							<TD><A href="#Option_resizerClass">resizerClass</A></TD>
							<TD><A href="#Option_togglerClass">togglerClass</A></TD>
						</TR>
						<TR class="r0">
							<TD><A href="#Option_buttonClass">buttonClass</A></TD>
							<TD></TD>
							<TD></TD>
						</TR>
						<TR class="rTitle">
							<TD colSpan="3">Pane Size &amp; Spacing</TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_size">size</A> &nbsp; <I>(initial
									size)</I></TD>
							<TD><A href="#Option_minSize">minSize</A></TD>
							<TD><A href="#Option_maxSize">maxSize</A></TD>
						</TR>
						<TR class="r0">
							<TD><A href="#Option_spacing_open">spacing_open</A></TD>
							<TD><A href="#Option_spacing_closed">spacing_closed</A></TD>
							<TD></TD>
						</TR>
						<TR class="rTitle">
							<TD colSpan="3">Resizer-bar Formatting</TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_resizerTip">resizerTip</A></TD>
							<TD><A href="#Option_resizerCursor">resizerCursor</A></TD>
							<TD><A href="#Option_resizerDragOpacity">resizerDragOpacity</A></TD>
						</TR>
						<TR class="r0">
							<TD><A href="#Option_sliderTip">sliderTip</A></TD>
							<TD><A href="#Option_sliderCursor">sliderCursor</A></TD>
							<TD><A href="#Option_maskIframesOnResize">maskIframesOnResize</A></TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_slideTrigger_open">slideTrigger_open</A></TD>
							<TD><A href="#Option_slideTrigger_close">slideTrigger_close</A></TD>
							<TD></TD>
						</TR>
						<TR class="rTitle">
							<TD colSpan="3">Toggler-button Formatting</TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_togglerTip_open">togglerTip_open</A></TD>
							<TD><A href="#Option_togglerTip_closed">togglerTip_closed</A></TD>
							<TD></TD>
						</TR>
						<TR class="r0">
							<TD><A href="#Option_togglerLength_open">togglerLength_open</A></TD>
							<TD><A href="#Option_togglerLength_closed">togglerLength_closed</A></TD>
							<TD><A href="#Option_hideTogglerOnSlide">hideTogglerOnSlide</A></TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_togglerAlign_open">togglerAlign_open</A></TD>
							<TD><A href="#Option_togglerAlign_closed">togglerAlign_closed</A></TD>
							<TD></TD>
						</TR>
						<TR class="r0">
							<TD><A href="#Option_togglerContent_open">togglerContent_open</A></TD>
							<TD><A href="#Option_togglerContent_closed">togglerContent_closed</A></TD>
							<TD></TD>
						</TR>
						<TR class="rTitle">
							<TD colSpan="3">Pane Open/Close Hotkeys</TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_enableCursorHotkey">enableCursorHotkey</A></TD>
							<TD><A href="#Option_customHotkeyModifier">customHotkeyModifier</A></TD>
							<TD><A href="#Option_customHotkey">customHotkey</A></TD>
						</TR>
						<TR class="rTitle">
							<TD colSpan="3">Pane Animation Effects</TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_fxName">fxName</A></TD>
							<TD><A href="#Option_fxName_open">fxName_open</A></TD>
							<TD><A href="#Option_fxName_close">fxName_close</A></TD>
						</TR>
						<TR class="r0">
							<TD><A href="#Option_fxSpeed">fxSpeed</A></TD>
							<TD><A href="#Option_fxSpeed_open">fxSpeed_open</A></TD>
							<TD><A href="#Option_fxSpeed_close">fxSpeed_close</A></TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_fxSettings">fxSettings</A></TD>
							<TD><A href="#Option_fxSettings_open">fxSettings_open</A></TD>
							<TD><A href="#Option_fxSettings_close">fxSettings_close</A></TD>
						</TR>
						<TR class="rTitle">
							<TD colSpan="3">Layout State Initialization</TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_initClosed">initClosed</A></TD>
							<TD><A href="#Option_initHidden">initHidden</A></TD>
							<TD></TD>
						</TR>
						<TR class="rTitle">
							<TD colSpan="3">Layout Event Callbacks</TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_onshow">onshow</A></TD>
							<TD><A href="#Option_onshow_start">onshow_start</A></TD>
							<TD><A href="#Option_onshow_end">onshow_end</A></TD>
						</TR>
						<TR class="r0">
							<TD><A href="#Option_onhide">onhide</A></TD>
							<TD><A href="#Option_onhide_start">onhide_start</A></TD>
							<TD><A href="#Option_onhide_end">onhide_end</A></TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_onopen">onopen</A></TD>
							<TD><A href="#Option_onopen_start">onopen_start</A></TD>
							<TD><A href="#Option_onopen_end">onopen_end</A></TD>
						</TR>
						<TR class="r0">
							<TD><A href="#Option_onclose">onclose</A></TD>
							<TD><A href="#Option_onclose_start">onclose_start</A></TD>
							<TD><A href="#Option_onclose_end">onclose_end</A></TD>
						</TR>
						<TR class="r1">
							<TD><A href="#Option_onresize">onresize</A></TD>
							<TD><A href="#Option_onresize_start">onresize_start</A></TD>
							<TD><A href="#Option_onresize_end">onresize_end</A></TD>
						</TR>
						<!--
	<TR>
		<TD><A href="#Option_"></A></TD>
		<TD><A href="#Option_"></A></TD>
		<TD></TD>
	</TR>
-->
					</TBODY>
				</TABLE>
			</DIV>
			<P>
				<B>Options are listed indicating their default values.</B> Where
				applicable, a list and/or description of other possible values is
				shown in brackets.
			</P>
			<H5 id="Option_applyDefaultStyles">
				<B>applyDefaultStyles</B> = false <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>
				When this is enabled, the layout will apply basic styles directly to
				resizers &amp; buttons. This is intended for quick mock-ups, so that
				you can 'see' your layout immediately.
				<P>Normally this should be set as a default option, but it can
					be set 'per-pane':</P>
				<CODE>
					<PRE>
						<I>// enable for ALL panes (List-style options)</I>
$("body").layout({
    applyDefaultStyles: true
});

<I>// enable for all <U>except</U> the west-pane</I>
$("body").layout({
    applyDefaultStyles:       true
,   west__applyDefaultStyles: false
});
</PRE>
				</CODE>
				<P>
					If this option is enabled, use
					<TT>"!important"</TT>
					to override the default styles.
				</P>
				<CODE>
					<PRE>
						<I>// 'important' required ONLY when applyDefaultStyles=true</I>
.ui-layout-pane {
    background-color: #EEE <STRONG>!important</STRONG>;
}
.ui-layout-resizer {
    background-color: #666 <STRONG>!important</STRONG>;
}
</PRE>
				</CODE>
				<P>
					<B>TIP</B>: Disable or remove this option once you create your own
					layout styles or specify a layout-theme stylesheet. For sample
					layout CSS, view the code in the <A
						href="http://layout.jquery-dev.net/demos/simple.html">simple.html</A>
					demo – that CSS <I>replicates</I> the styles applied by this
					option.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_scrollToBookmarkOnLoad">
				<B>scrollToBookmarkOnLoad</B> = true <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>
				This option handles of bookmarks that are passed on the URL of the
				page:
				<CODE>
					http://www.site.com/page.html<STRONG>#myBookmark</STRONG>
				</CODE>
				<P>
					The default functionality of bookmarks is broken when using a
					layout because the position and scrolling of pane elements are
					altered <U>after</U> the page loads. Enabling this option (enabled
					by default) causes the bookmark to be re-applied after the layout
					is created, causing the 'pane' containing the bookmark/anchor to be
					scrolled to bring it into view.
				</P>
				<P>This option should be left enabled in most cases, but if
					content in the layout-panes is never bookmarked, then you could
					disabled it.</P>
				<P>NOTE: This is a global option, so set in the top level of the
					options:</P>
				<CODE>
					<PRE>
						<I>// Sub-Key or List style options</I>
$("body").layout({
    <B>scrollToBookmarkOnLoad: false</B>
});
</PRE>
				</CODE>
			</BLOCKQUOTE>
			<H5 id="Option_showOverflowOnHover">
				<B>showOverflowOnHover</B> = false <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>
				If 'true', then when moused-over, the pane's zIndex is raised and
				overflow is set to 'visible'. This allows pop-ups and drop-downs to
				overlap adjacent panes.
				<P>
					<B>WARNING</B>: Enable this only for panes that <U>do not
						scroll</U>!
				</P>
				<P>
					SEE <A href="#Drop-Downs">Working with Drop-Downs and Pop-Ups</A>
					for more information.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_closable">
				<B>closable</B> = true <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>Can a pane be closed?</BLOCKQUOTE>
			<H5 id="Option_resizable">
				<B>resizable</B> = true <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>When open, can a pane be resized?</BLOCKQUOTE>
			<H5 id="Option_slidable">
				<B>slidable</B> = true <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>When closed, can a pane 'slide open' over
				adjacent panes?</BLOCKQUOTE>
			<H5 id="Option_paneSelector">
				<B>paneSelector</B> = ".ui-layout-PANE" <EM>(any valid jQuery
					selector string)</EM>
			</H5>
			<UL>
				<LI>MUST set <B>individually</B> for EACH PANE
				</LI>
			</UL>
			<BLOCKQUOTE>
				Default values are: ".ui-layout-north", ".ui-layout-west", etc. <BR>Any
				valid jQuery selector string can be used - classNames, IDs, etc.
				<P>To allow for 'nesting' of layouts, there are rules for how
					pane-elements are related to the layout-container. More flexibility
					was added in version 1.1.2 to handle panes are nested inside a
					'form' or other element.</P>
				<P class="bold">Rules for the relationship between a pane and
					its container:</P>
				<OL>
					<LI>When an '<STRONG>ID</STRONG>' is specified for
						paneSelector, the pane-element only needs to be <U>a
							descendant of the container</U>– it does NOT have to be a 'child'. <BR>&nbsp;
					</LI>
					<LI>When a '<STRONG>class-name</STRONG>' is specified for
						paneSelector, the pane-element must be EITHER:
						<UL>
							<LI><U>a child of the container</U>, or...</LI>
							<LI><U>a child of a form-element that is a child of the
									container</U><BR>(must be the 'first form' inside the
								container)</LI>
						</UL></LI>
				</OL>
				<P class="bold">Example:&nbsp; Panes are 'children of the
					container' (normal):</P>
				<CODE>
					<PRE>   $(document).ready(function() {
      <I>// all panes are 'children' of body (normal)</I>
      $("<STRONG>body</STRONG>").layout();
   });
&lt;/head&gt;
&lt;body&gt;
   &lt;div class="ui-layout-north"&gt;
   &lt;div class="ui-layout-center"&gt;
   &lt;div class="ui-layout-west"&gt;
&lt;/body&gt;
</PRE>
				</CODE>
				<P class="bold">Example:&nbsp; Panes are 'children of the first
					child-form':</P>
				<CODE>
					<PRE>   $(document).ready(function() {
      <I>// 'body' is the container - NOT 'form'</I>
      $("<STRONG>body</STRONG>").layout();
   });
&lt;/head&gt;
&lt;body&gt;

   &lt;form&gt;<I>&lt;!-- <STRONG>a child of body, and the 1st form</STRONG> --&gt;</I>
      &lt;div class="ui-layout-north"&gt;
      &lt;div class="ui-layout-center"&gt;
      &lt;div class="ui-layout-west"&gt;
   &lt;/form&gt;

   &lt;form&gt;<I>&lt;!-- <STRONG>a child of body, and the 2nd form</STRONG> --&gt;</I>
      <I>&lt;!-- <STRONG>these divs will be IGNORED!</STRONG> --&gt;</I>
      &lt;div class="ui-layout-north"&gt;
      &lt;div class="ui-layout-center"&gt;
      &lt;div class="ui-layout-west"&gt;
   &lt;/form&gt;

&lt;/body&gt;
</PRE>
				</CODE>
				<P class="bold">
					Example:&nbsp; ID-selectors allow panes to be <U>deeply nested</U>:
				</P>
				<CODE>
					<PRE>   $(document).ready(function() {
      <I>// panes only need to be 'descendants' of container</I>
      $("<STRONG>body</STRONG>").layout({
         <I>// using custom 'ID' paneSelectors</I>
         north__paneSelector:  "#north"
      ,  west__paneSelector:   "#west"
      ,  center__paneSelector: "#center"
      });   
   });
&lt;/head&gt;
&lt;body&gt;
   &lt;form&gt;<I>&lt;!-- nested inside a form --&gt;</I>
      &lt;div&gt;<I>&lt;!-- nested a 2nd level --&gt;</I>
         &lt;div&gt;<I>&lt;!-- nested a 3rd level --&gt;</I>
            &lt;div id="north"&gt;
            &lt;div id="center"&gt;
            &lt;div&gt;<I>&lt;!-- nested a 4th level! --&gt;</I>
               &lt;div id="west"&gt;
            &lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/form&gt;
&lt;/body&gt;
</PRE>
				</CODE>
				<P class="bold">Example:&nbsp; Using different
					selectors/features together:</P>
				<CODE>
					<PRE>   $(document).ready(function() {
      $("<STRONG>body</STRONG>").layout();
      <I>/*
         east &amp; west panes require 'ID' selectors
         because they are 'nested inside a div'
      */</I>
         west__paneSelector:   "<STRONG>#west</STRONG>"
      ,  east__paneSelector:   "<STRONG>#east</STRONG>"
      <I>/*
         north &amp; south panes are 'children of body'
         default-selectors shown just for reference
      */</I>
      ,  north__paneSelector:  ".ui-layout-north"
      ,  south__paneSelector:  ".ui-layout-center"
      */
      <I>/*
         center pane is a 'child of the first form'
         default-selector shown just for reference
      */</I>
      ,  center__paneSelector: ".ui-layout-center"
      });   
   });
&lt;/head&gt;
&lt;body&gt;
   <I>&lt;!-- 'north' &amp; 'south' are children of body --&gt;</I>
   &lt;div class="ui-layout-north"&gt;
   &lt;div class="ui-layout-south"&gt;
   <I>&lt;!-- 'center' is nested inside a form --&gt;</I>
   &lt;form&gt;
      &lt;div class="ui-layout-center"&gt;
   &lt;/form&gt;
   <I>&lt;!-- 'east' &amp; 'west' are nested inside a div --&gt;</I>
   &lt;div&gt;
      &lt;div <STRONG>id="west"</STRONG>&gt;
      &lt;div <STRONG>id="east"</STRONG>&gt;
   &lt;/div&gt;
&lt;/body&gt;
</PRE>
				</CODE>
			</BLOCKQUOTE>
			<H5 id="Option_contentSelector">
				<B>contentSelector</B> = ".ui-layout-content" <EM>(any valid
					jQuery selector string)</EM>
			</H5>
			<UL>
				<LI>MUST be a 'child' of one of the panes</LI>
			</UL>
			<BLOCKQUOTE>
				Selector string for INNER div/element. This div will auto-size so
				only it scrolls, and not the entire pane.
				<P>
					Same class-name <I>could</I> be used for divs inside all panes.
				</P>
				<P>
					SEE <B>Content-Scrolling</B> below for more information.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_contentIgnoreSelector">
				<B>contentIgnoreSelector</B> = "ui-layout-ignore" <EM>(any
					valid jQuery selector string)</EM>
			</H5>
			<BLOCKQUOTE>
				Selector string for INNER divs/elements. These elements will be
				'ignored' when calculations are done to auto-size the content
				element. This may be necessary if there are elements inside the pane
				that are absolutely-positioned and intended to 'overlay' other
				elements.
				<P>
					Same class-name <I>could</I> be used for elements inside all panes
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_paneClass">
				<B>paneClass</B> = "ui-layout-pane" <EM>(any valid className)</EM>
			</H5>
			<BLOCKQUOTE>
				Used for auto-generated classNames for each 'layout pane':
				<CODE>
					<PRE>
						<I>// default classes applied to the 'west pane'</I>
class="ui-layout-pane
       ui-layout-pane-west 
       ui-layout-pane-open
       ui-layout-pane-west-open"
</PRE>
				</CODE>
				<P>The last two classes change when the pane is closed:</P>
				<CODE>
					<PRE>class="...
       ui-layout-pane-closed
       ui-layout-pane-west-closed"
</PRE>
				</CODE>
			</BLOCKQUOTE>
			<H5 id="Option_resizerClass">
				<B>resizerClass</B> = "ui-layout-resizer" <EM>(any valid
					className)</EM>
			</H5>
			<BLOCKQUOTE>
				Used for auto-generated classNames for each 'resizer-bar':
				<CODE>
					<PRE>class="ui-layout-resizer
       ui-layout-resizer-west  
       ui-layout-resizer-open
       ui-layout-resizer-west-open"
</PRE>
				</CODE>
				<P>The last two classes change when the pane is closed:</P>
				<CODE>
					<PRE>class="...
       ui-layout-resizer-closed
       ui-layout-resizer-west-closed"
</PRE>
				</CODE>
				<P>
					If the pane was 'slid open', <U>2 additional classes</U> are
					generated:
				</P>
				<CODE>
					<PRE>class="...
       ui-layout-resizer-sliding
       ui-layout-resizer-west-sliding"
</PRE>
				</CODE>
				<P>
					When a pane is 'resized', the <STRONG>'real resizer-bar'</STRONG>
					gets <U>2 additional classes</U>:
				</P>
				<CODE>
					<PRE>class="...
       ui-layout-resizer-drag
       ui-layout-resizer-west-drag"
</PRE>
				</CODE>
				<P>
					The <STRONG>'cloned resizer-bar'</STRONG> – which is actually
					'dragged' – gets <U>2 different styles</U>:
				</P>
				<CODE>
					<PRE>class="...
       ui-layout-resizer-dragging
       ui-layout-resizer-west-dragging"
</PRE>
				</CODE>
				<P>
					See <A href="#Resizing_Classes">Classes Added During Resizing</A>
					for more information.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_togglerClass">
				<B>togglerClass</B> = "ui-layout-toggler" <EM>(any valid
					className)</EM>
			</H5>
			<BLOCKQUOTE>
				Used for auto-generated classNames for each 'toggler-button':
				<CODE>
					<PRE>class="ui-layout-toggler
       ui-layout-toggler-open 
       ui-layout-toggler-west
       ui-layout-toggler-west-open"
</PRE>
				</CODE>
				<P>The last two classes change when the pane is closed:</P>
				<CODE>
					<PRE>class="...
       ui-layout-toggler-closed
       ui-layout-toggler-west-closed"
</PRE>
				</CODE>
				<P>The toggler is 'inside' the resizer, so can also be accessed
					using those classes:</P>
				<CODE>
					<PRE>
						<I>/* CSS Rule - hide toggler while resizing */</I>
.ui-layout-resizer-drag  ui-layout-toggler {
    display: none;
}
</PRE>
				</CODE>
			</BLOCKQUOTE>
			<H5 id="Option_buttonClass">
				<B>buttonClass</B> = "ui-layout-button" <EM>(any valid
					className)</EM>
			</H5>
			<BLOCKQUOTE>
				This is used as a prefix when generating classNames for <STRONG>'custom
					buttons'</STRONG>. <BR>
				<I>(Do not confuse with normal 'toggler-buttons')</I>
				<P>
					FIRST, the '<B>type</B>' (action) of the button is appended:
				</P>
				<UL>
					<LI>ui-layout-button-<B>toggle</B></LI>
					<LI>ui-layout-button-<B>open</B></LI>
					<LI>ui-layout-button-<B>close</B></LI>
					<LI>ui-layout-button-<B>pin</B></LI>
				</UL>
				<P>
					THEN, the '<B>pane name</B>' of the button is appended, like:
				</P>
				<UL>
					<LI>ui-layout-button-toggle-<B>west</B></LI>
					<LI>ui-layout-button-open-<B>south</B></LI>
				</UL>
				<P>
					Here are the generated styles for a custom 'close-button' for the
					'west-pane':
					<CODE></CODE>
				</P>
				<CODE>
					<PRE>class="ui-layout-button-close 
       ui-layout-button-close-west"
</PRE>
				</CODE>
				<P>
					Pin-buttons have additional classes added for 'pin-up' and
					'pin-down' states:
					<CODE></CODE>
				</P>
				<CODE>
					<PRE>class="ui-layout-button-pin 
       ui-layout-button-pin-west
       ui-layout-button-pin-up 
       ui-layout-button-pin-west-up"
</PRE>
				</CODE>
				<P>The last two classes change when the pane is 'pinned' (open):</P>
				<CODE>
					<PRE>class="...
       ui-layout-button-pin-down 
       ui-layout-button-pin-west-down"
</PRE>
				</CODE>
				<P>
					SEE <A href="#Custom_Buttons">Creating Custom Toggler Buttons</A>
					for more info.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_size">
				<B>size</B> = "auto" (N/S)
				<TT>"200"</TT>
				(E/W) <EM>("auto" or integer - pixels)</EM>
			</H5>
			<BLOCKQUOTE>
				Specifies the initial size of the panes - 'height' for north &amp;
				south panes - 'width' for east and west. If "auto", then pane will <I>size
					to fit</I> its content - most useful for north/south panes (to auto-fit
				your banner or toolbar), but also works for east/west panes.

				<P>You normally will want different sizes for the panes, but a
					'default size' can be set</P>
			</BLOCKQUOTE>
			<H5 id="Option_minSize">
				<B>minSize</B> = 50 <EM>(integer - pixels)</EM>
			</H5>
			<BLOCKQUOTE>Minimum-size limit when resizing a pane (0 =
				as small as pane can go)</BLOCKQUOTE>
			<H5 id="Option_maxSize">
				<B>maxSize</B> = 0 <EM>(integer - pixels)</EM>
			</H5>
			<BLOCKQUOTE>Maximum-size limit when resizing a pane (0 =
				as large as pane can go)</BLOCKQUOTE>
			<H5 id="Option_spacing_open" class="withNext">
				<B>spacing_open</B> = 6 <EM>(integer - pixels)</EM>
			</H5>
			<H5 id="Option_spacing_closed">
				<B>spacing_closed</B> = 6 <EM>(integer - pixels)</EM>
			</H5>
			<BLOCKQUOTE>Spacing between pane and adjacent pane -
				when pane is 'open' or 'closed'</BLOCKQUOTE>
			<H5 id="Option_resizerTip">
				<B>resizerTip</B> = "Resize" <EM>(any string)</EM>
			</H5>
			<BLOCKQUOTE>Tip when resizer-bar can be 'dragged' to
				resize a pane</BLOCKQUOTE>
			<H5 id="Option_resizerCursor">
				<B>resizerCursor</B> = "resizer-<B style="color: rgb(255, 0, 0);">p</B>"
				<EM>(any valid CSS cursor)</EM>
			</H5>
			<UL>
				<LI>MUST set <B>individually</B> for EACH PANE
				</LI>
				<LI>Default values are: <TT>"resize-n"</TT>, <TT>"resize-w"</TT>,
					etc.
				</LI>
			</UL>
			<BLOCKQUOTE>
				This is the cursor when the mouse is over the 'resizer-bar'.
				However, if the mouse is over the 'toggler-button' <I>inside</I> the
				resizer bar, then the cursor is a 'pointer' - ie, the togglerCursor
				instead of the resizerCursor.
			</BLOCKQUOTE>
			<H5 id="Option_resizerDragOpacity">
				<B>resizerDragOpacity</B> = 1 <EM>(decimal value between 0 and
					1)</EM>
			</H5>
			<BLOCKQUOTE>
				Opacity of resizer bar when 'dragging' to resize a pane.
				<P>This value is passed to the ui.draggable widget</P>
				<P>
					Leave this set to '1' if you want to use CSS to control opacity.
					Otherwise you must use <SPAN style="color: rgb(255, 0, 0);">!important</SPAN>
					to override the specified opacity.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_maskIframesOnResize">
				<B>maskIframesOnResize</B> = true <EM>(true, false, jQuery
					Selector string)</EM>
			</H5>
			<BLOCKQUOTE>
				When enabled, layout will 'mask' iframes on the page when the
				resizer-bar is 'dragged' to resize a pane. This solved problems
				related to dragging an element over an iframe.
				<P>If desired, you can mask only specific iframes and/or only
					when specific panes are resized:</P>
				<CODE>
					<PRE>
						<I>// mask ALL iframes when ANY pane is resized</I>
$('body').layout({
    maskIframesOnResize: true
});

<I>// mask specific iframes when specific panes are resized</I>
$('body').layout({
    west__maskIframesOnResize: "#iframe1, #iframe2"
,   east__maskIframesOnResize: ".ui-layout-pane iframe"
});
</PRE>
				</CODE>
				<P>
					The mask is a DIV with the class
					<CODE>ui-layout-mask</CODE>
					By default the DIV is transparent, but it can be give am overlay
					effect by adding color and opacity:
				</P>
				<CODE>
					<PRE>
						<I>/* CSS Rule - give iframe-mask shading */</I>
.ui-layout-mask {
    background-color: #666;
    opacity: 0.1;
    filter: alpha(opacity=10); <I>/* for IE */</I>
}
</PRE>
				</CODE>
			</BLOCKQUOTE>
			<H5 id="Option_sliderTip">
				<B>sliderTip</B> = "Slide Open" <EM>(any string)</EM>
			</H5>
			<BLOCKQUOTE>Tip when the resizer-bar will trigger
				'sliding open'</BLOCKQUOTE>
			<H5 id="Option_sliderCursor">
				<B>sliderCursor</B> = "pointer" <EM>(any valid CSS cursor)</EM>
			</H5>
			<BLOCKQUOTE>Cursor when resizer-bar will trigger
				'sliding open' - ie, when pane is 'closed'</BLOCKQUOTE>
			<H5 id="Option_slideTrigger_open" class="withNext">
				<B>slideTrigger_open</B> = "click" <EM>("click", "dblclick",
					"mouseover")</EM>
			</H5>
			<H5 id="Option_slideTrigger_close">
				<B>slideTrigger_close</B> = "mouseout" <EM>("click",
					"mouseout")</EM>
			</H5>
			<BLOCKQUOTE>Trigger events to 'slide open' and 'slide
				closed' a pane</BLOCKQUOTE>
			<H5 id="Option_togglerTip_open" class="withNext">
				<B>togglerTip_open</B> = "Close" <EM>(any string)</EM>
			</H5>
			<H5 id="Option_togglerTip_closed">
				<B>togglerTip_closed</B> = "Open" <EM>(any string)</EM>
			</H5>
			<BLOCKQUOTE>Tip on toggler when pane is 'open' or
				'closed'.</BLOCKQUOTE>
			<H5 id="Option_togglerLength_open" class="withNext">
				<B>togglerLength_open</B> = 50 <EM>(integer - pixels)</EM>
			</H5>
			<H5 id="Option_togglerLength_closed">
				<B>togglerLength_closed</B> = 50 <EM>(integer - pixels)</EM>
			</H5>
			<BLOCKQUOTE>
				Length of toggler-button when pane is 'open' or 'closed'.
				<P>Length means 'width' for north/south togglers, and 'height'
					for east/west togglers.</P>
				<P>
					<TT>"100%"</TT>
					OR
					<TT>-1</TT>
					means 'full height/width of resizer bar' - 0 means 'hidden'
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_hideTogglerOnSlide">
				<B>hideTogglerOnSlide</B> = false <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>
				If true, the toggler-button is hidden when a pane is 'slid-open'.
				This makes sense because the user only needs to 'mouse-off' to close
				the pane.
				<P>
					You <I>could</I> set this 'false' and use CSS to do the same thing:
				</P>
				<CODE>
					<PRE>
						<I>/* CSS Rule - hide toggler when sliding-open */</I>
.ui-layout-resizer-sliding  ui-layout-toggler {
    display: none;
}
</PRE>
				</CODE>
			</BLOCKQUOTE>
			<H5 id="Option_togglerAlign_open" class="withNext">
				<B>togglerAlign_open</B> = "center" <EM>(position-keyword or
					integer - pixels)</EM>
			</H5>
			<H5 id="Option_togglerAlign_closed">
				<B>togglerAlign_closed</B> = "center" <EM>(position-keyword or
					integer - pixels)</EM>
			</H5>
			<BLOCKQUOTE>
				Alignment of toggler button inside the resizer-bar when pane is
				'open' or 'closed'.
				<P>
					A positive integer means a <I>pixel offset</I> from top or left
				</P>
				<P>
					A negative integer means a <I>pixel offset</I> from bottom or right
				</P>
				<P>Position-Keywords: "left", "center", "right", "top",
					"middle", "bottom"</P>
			</BLOCKQUOTE>
			<H5 id="Option_togglerContent_open" class="withNext">
				<B>togglerContent_open</B> = "" <EM>(text or HTML)</EM>
			</H5>
			<H5 id="Option_togglerContent_closed">
				<B>togglerContent_closed</B> = "" <EM>(text or HTML)</EM>
			</H5>
			<BLOCKQUOTE>
				Usually a background-image is set in CSS to customize a
				toggler-button. However, you can also put text inside a toggler by
				using these options. The text is wrapped in a SPAN, which is then
				added <I>inside</I> the toggler DIV. The SPAN classes identify them
				as either 'open' or 'closed' content:
				<CODE>
					<PRE>$('body').layout({
    west__togglerContent_open:   "&amp;#8249;" <I>// "‹"</I>
,   west__togglerContent_closed: "&amp;#8250;" <I>// "›"</I>
,   east__togglerContent_open:   "&amp;#8250;" <I>// "›"</I>
,   east__togglerContent_closed: "&amp;#8249;" <I>// "‹"</I>
});

<I>// would generates this HTML for the west-toggler</I>
&lt;SPAN class="... ui-layout-toggler-west ... "&gt;
   &lt;SPAN class="content content-open"&gt;<STRONG>&amp;#8249;</STRONG>&lt;/SPAN&gt;
   &lt;SPAN class="content content-closed"&gt;<STRONG>&amp;#8250;</STRONG>&lt;/SPAN&gt;
&lt;/SPAN&gt;
</PRE>
				</CODE>
				<P>You MUST add CSS to format the toggler-text or else it will
					only be '1px'!</P>
				<CODE>
					<PRE>
						<I>/* format the text inside the toggler */</I>
.ui-layout-toggler .content {
   font-size: 12px; <I>/* IMPORTANT: default = 1px */</I>
   font-weight: bold;
   text-align: center;
}
</PRE>
				</CODE>
				<P>NOTE: If you want a background-color or border on the
					toggler-button, set it on the 'toggler' element - NOT on the
					toggler 'content' element.
				<P>The inner text-span will be automatically centered inside the
					toggler button.</P>
			</BLOCKQUOTE>
			<H5 id="Option_enableCursorHotkey">
				<B>enableCursorHotkey</B> = true <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>
				If 'true', then 'cursor hotkeys' are enabled. Can be set per-pane if
				desired.
				<P>
					These <I>default</I> hotkeys cannot be changed - only enabled or
					disabled.
				</P>
				<P>
					The cursor/arrow key must be pressed in combination with <B>CTRL</B>
					<I>-or-</I> <B>SHIFT</B>
				</P>
				<UL>
					<LI>Toggle North-pane:&nbsp; <TT>
							<STRONG>CTRL+Up</STRONG>
						</TT> &nbsp; or &nbsp; <TT>
							<STRONG>SHIFT+Up</STRONG>
						</TT>
					<LI>Toggle South-pane:&nbsp; <TT>
							<STRONG>CTRL+Down</STRONG>
						</TT> &nbsp; or &nbsp; <TT>
							<STRONG>SHIFT+Down</STRONG>
						</TT>
					<LI>Toggle West-pane:&nbsp;&nbsp; <TT>
							<STRONG>CTRL+Left</STRONG>
						</TT> &nbsp; or &nbsp; <TT>
							<STRONG>SHIFT+Left</STRONG>
						</TT>
					<LI>Toggle East-pane:&nbsp;&nbsp;&nbsp; <TT>
							<STRONG>CTRL+Right</STRONG>
						</TT> &nbsp; or &nbsp; <TT>
							<STRONG>SHIFT+Right</STRONG>
						</TT></LI>
				</UL>
				<P>
					The SHIFT+ARROW combinations are <I>ignored</I> if pressed while
					the cursor is in a form field, allowing users to 'select text' —
					eg: SHIFT+Right in a TEXTAREA
				<P></P>
			</BLOCKQUOTE>
			<H5 id="Option_customHotkeyModifier">
				<B>customHotkeyModifier</B> = "SHIFT" <EM>("CTRL", "SHIFT",
					"CTRL+SHIFT")</EM>
			</H5>
			<BLOCKQUOTE>
				Custom hotkeys must be pressed in combination with either the CTRL
				or SHIFT key - or both together. Use this option to choose which
				modifier-key(s) to use with the customHotKey.
				<P>If this option is missing or invalid, "CTRL+SHIFT" is
					assumed.</P>
				<P>NOTE: The ALT key cannot be used because it is not detected
					by some browsers.</P>
			</BLOCKQUOTE>
			<H5 id="Option_customHotkey">
				<B>customHotkey</B> = "" <EM>(alphanumeric character OR a
					charCode)</EM>
			</H5>
			<UL>
				<LI>MUST set <B>individually</B> for EACH PANE
				</LI>
			</UL>
			<BLOCKQUOTE>
				If a hotkey is specified, it is <U>automatically enabled</U>. It
				does not matter whether 'cursor hotkeys' are also enabled – those
				are separate.
				<P>You can specify any of the following values:</P>
				<UL>
					<LI>letter from A to Z</LI>
					<LI>number from 0 to 9</LI>
					<LI>Javascript charCode value for the key</LI>
				</UL>
				<P>
					The customHotkeys option must be set separately for each pane, but
					the customHotkeyModifier option can be set <I>once</I>, as the
					'default' for all panes.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_fxName">
				<B>fxName</B> = "slide" <EM>("none", "slide", "drop", "scale",
					<I>customer effect name</I>)
				</EM>
			</H5>
			<BLOCKQUOTE>Animation effect for open/close. Choose a
				preset effect OR can specify a custom fxName as long as you also
				specify fxSettings (even if fxSettings is just empty - {})</BLOCKQUOTE>
			<H5 id="Option_fxSpeed">
				<B>fxSpeed</B> = "normal" <EM>("fast", "normal", "slow",
					integer - ms)</EM>
			</H5>
			<BLOCKQUOTE>Speed of animations – standard jQuery
				keyword like 'fast', or a millisecond value.</BLOCKQUOTE>
			<H5 id="Option_fxSettings">
				<B>fxSettings</B> = {} <EM>(Hash containing fx-settings)</EM>
			</H5>
			<BLOCKQUOTE>
				You can customize the default animation settings by passing new
				settings, like:
				<CODE>
					<PRE>$("body").layout({
    fxName:     "slide"
,   fxSettings: { duration: 500, easing: "bounceInOut" }
});
</PRE>
				</CODE>
				If a non-standard effect is specified, then fxSettings is REQUIRED
				(can be 'empty' though)
				<CODE>
					<PRE>$("body").layout({
    fxName:     "blind"
,   speed:      1000 <I>// optional</I>
,   north__fxSettings: { direction: "vertical" }
,   west__fxSettings:  { direction: "horizontal" }
,   east__fxSettings:  {} <I>// empty fxSettings is still valid!</I>
});
</PRE>
				</CODE>
				<P>It's also possible to extend the 'default' layout effects by
					passing a special key:</P>
				<CODE>
					<PRE>$("body").layout({
   <STRONG>effects</STRONG>: {
      <I>// MODIFY a standard effect</I>
      slide: {
         all: { duration: 500, easing: "bounceInOut" }
      }
      <I>// ADD a new effect</I>
   ,  blind: {
         all:   {}
      ,  north: { direction: "vertical" }
      ,  south: { direction: "vertical" }
      ,  east:  { direction: "horizontal" }
      ,  west:  { direction: "horizontal" }
      }
   }
});
</PRE>
				</CODE>
				<P>
					You MUST use the <A href="#Sub-Key_Format">sub-key option
						format</A> to update default effects. <BR>(This will change when
					Layout is updated to the UI widget API)
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_initClosed">
				<B>initClosed</B> = false <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>If 'true', then pane is 'closed' when layout
				is created</BLOCKQUOTE>
			<H5 id="Option_initHidden">
				<B>initHidden</B> = false <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>If 'true', then pane is 'hidden' when layout
				is created - no resizer or spacing is visible, as if the pane does
				not exist!</BLOCKQUOTE>
			<H5 id="Option_onshow" class="withNext">
				<B>onshow</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<H5 id="Option_onshow_start" class="withNext">
				<B>onshow_start</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<H5 id="Option_onshow_end">
				<B>onshow_end</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<UL>
				<LI>MUST set <B>individually</B> for EACH PANE
				</LI>
			</UL>
			<BLOCKQUOTE>
				Callback function name - activate when pane is 'closed'
				<P>
					SEE <A href="#Callback_Functions">Using Callback Functions</A>
					below.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_onhide" class="withNext">
				<B>onhide</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<H5 id="Option_onhide_start" class="withNext">
				<B>onhide_start</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<H5 id="Option_onhide_end">
				<B>onhide_end</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<UL>
				<LI>MUST set <B>individually</B> for EACH PANE
				</LI>
			</UL>
			<BLOCKQUOTE>
				Callback function name - activate when pane is 'closed'
				<P>
					SEE <A href="#Callback_Functions">Using Callback Functions</A>
					below.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_onopen" class="withNext">
				<B>onopen</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<H5 id="Option_onopen_start" class="withNext">
				<B>onopen_start</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<H5 id="Option_onopen_end">
				<B>onopen_end</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<UL>
				<LI>MUST set <B>individually</B> for EACH PANE
				</LI>
			</UL>
			<BLOCKQUOTE>
				Callback function name - activate when pane is 'opened'
				<P>
					SEE <A href="#Callback_Functions">Using Callback Functions</A>
					below.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_onclose" class="withNext">
				<B>onclose</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<H5 id="Option_onclose_start" class="withNext">
				<B>onclose_start</B> = "" <EM>(name of, or pointer to a
					callback function)</EM>
			</H5>
			<H5 id="Option_onclose_end">
				<B>onclose_end</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<UL>
				<LI>MUST set <B>individually</B> for EACH PANE
				</LI>
			</UL>
			<BLOCKQUOTE>
				Callback function name - activate when pane is 'closed'
				<P>
					SEE <A href="#Callback_Functions">Using Callback Functions</A>
					below.
				</P>
			</BLOCKQUOTE>
			<H5 id="Option_onresize" class="withNext">
				<B>onresize</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<H5 id="Option_onresize_start" class="withNext">
				<B>onresize_start</B> = "" <EM>(name of, or pointer to a
					callback function)</EM>
			</H5>
			<H5 id="Option_onresize_end">
				<B>onresize_end</B> = "" <EM>(name of, or pointer to a callback
					function)</EM>
			</H5>
			<UL>
				<LI>MUST set <B>individually</B> for EACH PANE
				</LI>
			</UL>
			<BLOCKQUOTE>
				Callback function name - activate when pane is 'resized' - either
				manually or as a result of the container resizing.
				<P>
					SEE <A href="#Callback_Functions">Using Callback Functions</A>
					below.
				</P>
			</BLOCKQUOTE>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Layout_State">Reading the Layout-State</H2>
		<DIV class="collapsible">
			<P>
				As of version 1.1.1, a <STRONG>'state'</STRONG> object was added to
				UI Layout. This hash object contains the 'current dimensions' for
				all panes, plus logic-vars indicating each pane's 'current state'.
				For example: Is the west pane open or closed? What is its current
				size?
			</P>
			<P>
				This object is exposed as a 'state' property (eg: myLayout.state) so
				it can be read by custom code. <U>All state properties are
					READ-ONLY</U>
			</P>
			<P>All state data must be referenced 'by pane'. Most logic-vars
				(eg: isClosed) apply only to 'border panes'.</P>
			<CODE>
				<PRE>var state = <STRONG>myLayout.state</STRONG>;

<I>// current state</I>
var isWestPaneOpen       = !state.west.isClosed;
var isSouthPaneHidden    = state.south.isHidden;
var isEastPaneSliding    = state.east.isSliding;

<I>// current dimensions</I>
var westCurrentSize      = state.west.size;
var westMinimumSize      = state.west.minSize;
var containerInnerWidth  = state.container.innerWidth;
var containerPaddingLeft = state.container.paddingLeft;
</PRE>
			</CODE>
			<P>
				<U>State functionality is not yet finished</U>.
			</P>
			<P>Eventually a complete set of dimensions, including padding and
				borders, will be available for ALL panes, including the center.
				Details on this will be added here when it is complete.</P>
			<P>In the meantime, you can measure the panes youself if needed.</P>
			<H3 id="Logic_Vars">Auto-Generated State-Logic Vars</H3>
			<H5>
				<B>isClosed</B> <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>Is the pane 'closed'? If not closed, then
				could be EITHER 'open normally' OR 'sliding open'.</BLOCKQUOTE>
			<H5>
				<B>isSliding</B> <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>
				When a pane is 'sliding', it was opened by <B><I>sliding
						over-top</I></B> of other panes. The pane <I>is</I> 'open', but only
				temporarily - until the user moves their mouse off.
				<P>This is different from when a pane is 'opened normally', and
					becomes fixed in place, and all adjacent panes are resized.</P>
				<P>When isSliding=true, isClosed=false - when it slides closed
					again, isClosed=true.</P>
				<P>When a pane is 'opened normally', isClosed=false AND
					isSliding=false.</P>
			</BLOCKQUOTE>
			<H5>
				<B>isResizing</B> <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>This is only true when the user is in the
				process of 'dragging' the resizer bar.</BLOCKQUOTE>
			<H5>
				<B>isHidden</B> <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>
				A 'hidden pane' is <U>not</U> the same as a 'closed pane'. When a
				pane is hidden, it is as if it does not exist - there is no
				resizer-bar or toggler-button visible, and the 'pane spacing'
				collapses.

				<P>So if a pane is hidden, you must have some other way to make
					it visible again. This means a custom button or some other custom
					code that calls the show() command.</P>
			</BLOCKQUOTE>
			<H5>
				<B>noRoom</B> <EM>(true, false)</EM>
			</H5>
			<BLOCKQUOTE>
				When there is 'not enough room' for a pane to be displayed, it is <I>automatically
					hidden</I>. In this case, isHidden=true AND noRoom=true.
				<P>
					This is different than hiding a pane using the hide() command,
					because when there is enough room for the pane to appear (by
					resizing or closing a pane), the hidden pane will reappear <I>automatically</I>.
				</P>
				<P>
					<B>This is the only logic var that also applies to the
						'center-pane'.</B>
				</P>
			</BLOCKQUOTE>
			<H3 id="Reading_Size">Reading Pane-Size</H3>
			<P>The state.PANE.size property is the 'current size'. This is
				different from options.PANE.size, which was the 'initial size'
				specified when the layout was created.</P>
			<P>
				Numerous size values are available, including minSize &amp; maxSize.
				These are constantly updated based on the layout's current state.
				(You can read the <I>initial</I> minSize/maxSize from
				'layout.options')
			</P>
			<P>The state pane-size can be combined with state-logic data when
				'saving the current layout state'.</P>
			<H3 id="Saving_State">Saving the Layout State</H3>
			<P>
				SEE <A href="http://layout.jquery-dev.net/tips.cfm#StateManagement">State
					Management</A> on the <A href="http://layout.jquery-dev.net/tips.cfm">Tips
					&amp; Tricks</A> page for an example of how 'layout state' can be
				persisted.
			</P>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Callback_Functions">Using Callback Functions</H2>
		<DIV class="collapsible">
			<P>Callbacks can be set for open, close and resize events for
				each pane. The callback option can be:</P>
			<UL>
				<LI><B>A function name</B>, eg: <TT>onresize:
						"doSomething, ['parameter']"</TT></LI>
				<LI><B>A pointer to a function</B>, eg: <TT>onresize:
						doSomething</TT></LI>
				<LI><B>An anonymous function</B>, eg: <TT>onresize:
						function(){ ... }</TT></LI>
			</UL>
			<P>There are 5 types of pane-events that will trigger a callback:</P>
			<UL>
				<LI><B>onhide</B> – fires when a pane is 'hidden' (different
					from 'closed')</LI>
				<LI><B>onshow</B> – fires when a pane is 'un-hidden'</LI>
				<LI><B>onopen</B> – fires when a pane is opened</LI>
				<LI><B>onclose</B> – fires when a pane is closed</LI>
				<LI><B>onresize</B> – fires when a pane is resized</LI>
			</UL>
			<P></P>
			<P>EACH type of pane-event has 3 callback options, for example:</P>
			<UL>
				<LI>onopen<B>_start</B> – a 'start' callback
				</LI>
				<LI>onopen<B>_end</B> – an 'end' callback
				</LI>
				<LI>onopen – <U>an alias</U> for the 'end' callback
				</LI>
			</UL>
			<H3>Event 'Start' Callbacks</H3>
			<P>
				The 'start' callback fires BEFORE the event starts, so
				'onopen_start' fires <I>before</I> the pane starts to open.
			</P>
			<P>If a 'start' callback function returns 'false', the event will
				be cancelled.</P>
			<PRE>
				<CODE>
$("body").layout({
    onopen_start: function () {
        <I>// STOP the pane from opening</I>
        return false; <I>// false = Cancel</I>
    }
});
</CODE>
			</PRE>
			<P>NOTE: If an event is 'automatically triggered' by layout logic
				– like closing a pane when there is insufficient room – then the
				event cannot be cancelled. In this case, returning false will have
				no effect.</P>
			<P></P>
			<H3>Event 'End' Callbacks</H3>
			<P>
				The 'end' callback fires AFTER the event completes. So onopen_end
				will fire <I>after</I> the pane has opened, including the completion
				of all animations.
			</P>
			<P>
				Callback options without a suffix are really 'end' callbacks, so <B>onopen</B>
				<I>is the same as</I> <B>onopen_end</B>. These options exist for
				backwards compatibility, and for simpler code, since most of the
				time it will be the 'end' callbacks you will use.
			</P>
			<P>NOTE: If BOTH 'onopen' and 'onopen_end' options are set, the
				'onopen_end' option takes precidence and the 'onopen' option is
				ignored.</P>
			<H3 id="Callback_Parameters">Callback Parameters</H3>
			<P>
				Five parameters are <I>automatically</I> returned to all callback
				functions, in this order:
			</P>
			<UL>
				<LI><STRONG>pane name</STRONG> - Always one of: "north",
					"south", "east" or "west"</LI>
				<LI><STRONG>pane element</STRONG> - The pane-element the
					callback was for, inside a jQuery wrapper</LI>
				<LI><STRONG>pane state</STRONG> - The 'state branch' for this
					pane, eg: <TT>state.north</TT></LI>
				<LI><STRONG>pane options</STRONG> - The 'option branch' for
					this pane, eg: <TT>options.north</TT></LI>
				<LI><STRONG>layout name</STRONG> - <I>If</I> a 'name' was
					specified when creating the layout, else returns an empty string.</LI>
			</UL>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Style_Reference">Style Reference</H2>
		<DIV class="collapsible">
			<H3 id="Generated_Classes">Auto-Generated Classes</H3>
			<P>When a layout is created, numerous CSS class-names are added
				to the original 'pane' elements, as well as the generated
				'resizer-bar' and 'toggler-button' elements.</P>
			<P>These options are used to set the 'base' class-names (default
				values shown):</P>
			<CODE>
				<PRE>paneClass:    "ui-layout-pane"
resizerClass: "ui-layout-resizer"
togglerClass: "ui-layout-toggler"
</PRE>
			</CODE>
			<P>
				Each of the 3 element types - panes, resizers and togglers - has <I>multiple</I>
				class-names generated based on these options. Some classes change to
				indicate on whether the pane is open or closed. This comprehensive
				set of auto-generated classes make it easy for CSS rules to target
				all the elements as a group, specifically, and by 'state'
				(open/closed).
			</P>
			<P>
				Here are classes for all '<B>west</B>' elements, using the default
				class-names:
			</P>
			<P>
				<STRONG>Pane Element</STRONG> (hard-coded DIV or IFRAME)
			</P>
			<UL>
				<LI>ui-layout-pane</LI>
				<LI>ui-layout-pane-[PANE-NAME]</LI>
				<LI>ui-layout-pane-[PANE-STATE]</LI>
				<LI>ui-layout-pane-[PANE-NAME]-[PANE-STATE]</LI>
			</UL>
			<P>
				This is the result when the auto-generated classes are added to the
				<B>west</B> pane:
			</P>
			<CODE>
				<PRE>&lt;div class="ui-layout-pane
            ui-layout-pane-west 
            ui-layout-pane-open
            ui-layout-pane-west-open"&gt;
</PRE>
			</CODE>
			<P>When the pane is 'closed', the last two classes CHANGE:</P>
			<CODE>
				<PRE>&lt;div class="...
            ui-layout-pane-closed
            ui-layout-pane-west-closed"&gt;
</PRE>
			</CODE>
			<P>
				NOTE: Each pane must have a <I>unique</I> 'paneSelector' in the HTML
				markup. The default selector is a class-name, eg:
				<TT>&lt;div class="</TT>
				<B>ui-layout-west</B>
				<TT>"&gt;</TT>
				. However, an ID or other class-name could be used instead, so to
				avoid confusion with the auto-generated classes, the
				"ui-layout-west" class-name is NOT INCLUDED in the code samples
				above.
			</P>
			<P>
				<STRONG>Resizer Element</STRONG> (auto-generated DIV)
			</P>
			<UL>
				<LI>ui-layout-resizer</LI>
				<LI>ui-layout-resizer-[PANE-NAME]</LI>
				<LI>ui-layout-resizer-[PANE-STATE]</LI>
				<LI>ui-layout-resizer-[PANE-NAME]-[PANE-STATE]</LI>
			</UL>
			<P>
				This is the result when the auto-generated classes are added to the
				<B>west</B> resizer:
			</P>
			<CODE>
				<PRE>&lt;div class="ui-layout-resizer
            ui-layout-resizer-west 
            ui-layout-resizer-open
            ui-layout-resizer-west-open"&gt;
</PRE>
			</CODE>
			<P>When the pane is 'closed', the last two classes CHANGE:</P>
			<CODE>
				<PRE>&lt;div class="...
            ui-layout-resizer-closed
            ui-layout-resizer-west-closed"&gt;
</PRE>
			</CODE>
			<P>
				If a pane is 'slid open' - instead of being opened normally - two <I>additional</I>
				classes are generated:
			</P>
			<UL>
				<LI>ui-layout-resizer-sliding</LI>
				<LI>ui-layout-resizer-west-sliding</LI>
			</UL>
			<P>So this is the complete set of classes when the west pane is
				'slid open':</P>
			<CODE>
				<PRE>&lt;div class="ui-layout-resizer
            ui-layout-resizer-west 
            ui-layout-resizer-open
            ui-layout-resizer-west-open
            <STRONG>ui-layout-resizer-sliding
            ui-layout-resizer-west-sliding</STRONG>"&gt;
</PRE>
			</CODE>
			<P>These extra classes allow the resizer-bar to be styled
				differenty when a pane is 'sliding'. For example, the resizer-bar
				could be grey when the pane is 'open' normally, but transparent if
				it is 'slid open'.
			<P>
				<STRONG>Toggler Element</STRONG> (auto-generated DIV)
			</P>
			<UL>
				<LI>ui-layout-toggler</LI>
				<LI>ui-layout-toggler-[PANE-NAME]</LI>
				<LI>ui-layout-toggler-[PANE-STATE]</LI>
				<LI>ui-layout-toggler-[PANE-NAME]-[PANE-STATE]</LI>
			</UL>
			<P>
				This is the result when the auto-generated classes are added to the
				<B>west toggler:</B>
			</P>
			<CODE>
				<PRE>&lt;div class="ui-layout-toggler
            ui-layout-toggler-west 
            ui-layout-toggler-open
            ui-layout-toggler-west-open"&gt;
</PRE>
			</CODE>
			<P>When the pane is 'closed', the last two classes CHANGE:</P>
			<CODE>
				<PRE>&lt;div class="...
            ui-layout-toggler-closed
            ui-layout-toggler-west-closed"&gt;
</PRE>
			</CODE>
			<P>
				Using the default classes makes it easy to apply a 'layout theme'.
				However, if there is more than one layout on a page, you may want to
				change the class-name for <I>one of them</I> so each layout can have
				different CSS - for example: The <A
					href="http://layout.jquery-dev.net/demos/complex.html">complex
					demo</A> uses custom class-names for the 'outer layout' to
				differentiate it from the 'inner layout', which uses the default
				class-names.
			</P>
			<H3 id="Resizing_Classes">Classes Added During Resizing</H3>
			<P>
				When a pane is being "resized", a <B>clone</B> of the resizer-bar is
				created by ui.draggable. During the dragging process, classes are
				added to both the <I>real</I> resizer-bar (which does not move) and
				the <I>cloned</I> resizer-bar (which is 'dragging'). When dragging
				is completed, the cloned element is deleted, the real resizer-bar is
				moved to the new position, and the 'drag' classes are removed.
			</P>
			<P>
				These are the classes added to the west-pane elements <B>while
					resizing is in-progress</B>:
			</P>
			<P>
				<B>REAL Resizer-bar</B>
			</P>
			<UL>
				<LI>ui-layout-resizer-drag</LI>
				<LI>ui-layout-resizer-west-drag</LI>
			</UL>
			<P>
				The 'drag' classes are added to the 4 regular classes <I>already</I>
				on the resizer bar
			</P>
			<CODE>
				<PRE>class="ui-layout-resizer
       ui-layout-resizer-west
       ui-layout-resizer-open
       ui-layout-resizer-west-open
       <STRONG>ui-layout-resizer-drag
       ui-layout-resizer-west-drag</STRONG>"
</PRE>
			</CODE>
			<P>
				<B>CLONED Resizer-bar</B>
			</P>
			<UL>
				<LI><I>ui-draggable-dragging</I> - this class is generated by
					ui.draggable when the clone is created</LI>
				<LI>ui-resizer-dragging</LI>
				<LI>ui-resizer-west-dragging</LI>
			</UL>
			<P>
				The cloned bar <I>inherits</I> the 4 regular classes from the real
				resizer-bar - the 'dragging' classes are added to these:
			</P>
			<CODE>
				<PRE>class="ui-layout-resizer
       ui-layout-resizer-west
       ui-layout-resizer-open
       ui-layout-resizer-west-open
       <STRONG>ui-draggable-dragging
       ui-layout-resizer-dragging 
       ui-layout-resizer-west-dragging</STRONG>"
</PRE>
			</CODE>
			<H3 id="Resizer_Graphics">Resizer &amp; Toggler Graphics</H3>
			<P>To use graphics for resizer-bars and toggler-buttons, specify
				them as background-images in your CSS. Different graphics and/or
				opacity can be specified for each 'state' - open, closed, resizing
				and hover (using the :hover pseudo-class).</P>
			<P>
				The <A href="http://layout.jquery-dev.net/demos/complex.html">complex
					demo</A> uses a variety of colors, images and opacity to create a range
				of effects. Pane-spacing can also be used to control appearance.
				Each pane can have different options and be styled independant of
				the others.
			</P>
			<H3 id="Custom_Button_Classes">Custom Button Classes</H3>
			<P>If you add custom buttons using the layout utilities described
				below, a number of additional styles are auto-generated for the
				button-elements.</P>
			<P>
				SEE <A href="#Utilities">Special Utility Methods</A> below for a
				list of the button classes.
			</P>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Auto-Generated_IDs">Auto-Generated IDs</H2>
		<DIV class="collapsible">
			<P>
				If an ID is specified as a 'paneSelector', then the generated
				resizer-bar and toggler-button for that pane are <I>automatically</I>
				given corresponding IDs, for example...
			</P>
			<P>If these options are used when creating a layout...</P>
			<CODE>
				<PRE>layout({
    north__paneSelector: "<STRONG>#header</STRONG>"
,   west__paneSelector:  "<STRONG>#Menu</STRONG>"
});
</PRE>
			</CODE>
			<P>The associated resizer and toggler elements will be given a
				similar ID - by appending "-resizer" or "-toggler" to the ID of the
				'pane'...</P>
			<CODE>
				<PRE>// resizer &amp; toggler for the NORTH ('header') pane
&lt;div id="<STRONG>header-resizer</STRONG>" class="..."&gt;
    &lt;div id="<STRONG>header-toggler</STRONG>" class="..."&gt;&lt;/div&gt;
&lt;/div&gt;

// resizer &amp; toggler for the WEST ('menu') pane
&lt;div id="<STRONG>Menu-resizer</STRONG>" class="..."&gt;
    &lt;div id="<STRONG>Menu-toggler</STRONG>" class="..."&gt;&lt;/div&gt;
&lt;/div&gt;
</PRE>
			</CODE>
			<P>
				<B>NOTE</B>: This does not affect the auto-generated 'class-names'
				added to the elements.
			</P>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Content-Scrolling">Content-Scrolling (Headers &amp;
			Footers)</H2>
		<DIV class="collapsible">
			<P>There are 2 options for this feature (class-names shown are
				defaults):</P>
			<UL>
				<LI><B>contentSelector</B> = ".ui-layout-content"</LI>
				<LI><B>contentIgnoreSelector</B> = ".ui-layout-ignore"</LI>
			</UL>
			<P>
				When initializing a pane, the layout code searches for:
				<TT>$Pane.children(s.contentSelector)</TT>
				. If a content element is found (usually a div or an iframe), it
				will be <I>auto-sized</I> to fill the vertical space not used by
				other child-elements. If the space is not enough to display all the
				content, then the content element will 'scroll'.
			</P>
			<P>
				This makes all elements <I>above</I> the content element look like a
				'header', and everything below like a 'footer'. All this is done by
				just dynamically <I>resizing</I> the content element - there is no
				special CSS, and no other elements are touched.
			</P>
			<P>
				The content element can have <I>unlimited</I> siblings - header,
				subheader, footer, etc. The code loops through all other elements to
				calculate the height that remains to fit the content element. If
				there is <I>not enough room</I>, the content element is completely
				hidden.
			</P>
			<P>
				To exclude an element(s) from the height calculations - like an
				absolutely positioned element - add a selector for it/them in the
				<TT>contentIgnoreSelector</TT>
				option. Anything matching this selector is 'ignored' when measuring.
			</P>
			<P>The content element is resized every time the pane containing
				it is resized or opened. You can also manually trigger a resize from
				your own code using the resizeContent() method, eg:</P>
			<CODE>
				<PRE>myLayout.resizeContent("west");
</PRE>
			</CODE>
		</DIV>
		<!-- end collapsible -->
		<H2 id="Utilities">Special Utility Methods</H2>
		<DIV class="collapsible">
			<P>A number of utility methods are provided to integrate custom
				buttons and other code with your layout. These utilities are
				available as 'methods' of the layout instance.</P>
			<P>All sample code below assumes the layout-instance is assigned
				to 'myLayout', like so:</P>
			<CODE>
				<PRE>var myLayout = $("body").layout();
</PRE>
			</CODE>
			<H3 id="Custom_Buttons">Creating Custom Toggler Buttons</H3>
			<H4>Hard-Coding Buttons</H4>
			<P>Custom buttons can be hard-coded in HTML by using basic layout
				methods:</P>
			<CODE>
				<PRE>&lt;button onclick="myLayout.toggle('west')"&gt;
    Toggle West Pane&lt;/button&gt;

&lt;img onclick="myLayout.open('west')"
    src="img/open_button.gif"&gt;

&lt;span onClick="myLayout.close('west')&gt;
    Close West Pane&lt;/span&gt;
</PRE>
			</CODE>
			<P>
				SEE the <A href="http://layout.jquery-dev.net/demos/simple.html">simple
					demo</A> for samples of hard-coded buttons.
			</P>
			<H5 class="withNext">
				<B>addToggleBtn(</B> selector, pane <B>)</B>
			</H5>
			<H5 class="withNext">
				<B>addCloseBtn(</B> selector, pane <B>)</B>
			</H5>
			<H5>
				<B>addOpenBtn(</B> selector, pane <B>)</B>
			</H5>
			<BLOCKQUOTE>
				<P>
					These 3 utilities provide <I>another way</I> to create buttons to
					open and close panes. First create the element(s) to use as a
					button, then call the utility you want and pass these parameters:
				</P>
				<UL>
					<LI><B>selector</B> - a jQuery selector string to access the
						button element(s)</LI>
					<LI><B>pane</B> - the pane the button is to control: "north",
						"south", "east" or "west"</LI>
				</UL>
				<P>Location does not matter, so a button in the north-pane (eg,
					a toolbar) can toggle the east-pane (eg, a help-panel).</P>
				<P>Examples using 'ID' and 'class' selectors for
					button-elements:</P>
				<CODE>
					<PRE>addOpenBtn("#tbarShowHelpButton", "east");

addToggleBtn(".ui-layout-pane-north .custom-toggle-button"
             , "west");
</PRE>
				</CODE>
				<P>
					Two classes are automatically added to the button-element, based on
					the <B>buttonClass</B> option, which has a default value of "<B>ui-layout-button</B>":
				</P>
				<UL>
					<LI>ui-layout-button-ACTION</LI>
					<LI>ui-layout-button-ACTION-PANE</LI>
				</UL>
				<P>Examples for each type of button - assumes buttons control
					the 'west pane':</P>
				<CODE>
					<PRE>class="ui-layout-button-toggle
       ui-layout-button-toggle-west"

class="ui-layout-button-close
       ui-layout-button-close-west"

class="ui-layout-button-open
       ui-layout-button-open-west"
</PRE>
				</CODE>
				<P>
					SEE the <A href="http://layout.jquery-dev.net/demos/complex.html">complex
						demo</A> - the square 'close' buttons in the east/west panes utilize
					these utilities.
				</P>
			</BLOCKQUOTE>
			<H5>
				<B>addPinBtn(</B> selector, pane <B>)</B>
			</H5>
			<BLOCKQUOTE>
				<P>This utility makes an element act like a 'pin button' &nbsp;
					a common and intuitive interface device.</P>
				<P>
					SEE the <A href="http://layout.jquery-dev.net/demos/complex.html">complex
						demo</A> to see how pin-buttons work.
				</P>
				<P>Classes similar to the utilities above are added, plus two
					additional classes to indicate the 'current state' of the pin
					(up/down):</P>
				<UL>
					<LI>ui-layout-button-pin</LI>
					<LI>ui-layout-button-pin-west</LI>
					<LI>ui-layout-button-pin-up</LI>
					<LI>ui-layout-button-pin-west-up</LI>
				</UL>
				<P>When the pin is 'down' (pinned), the last two classes change
					to:</P>
				<UL>
					<LI>ui-layout-button-pin-down</LI>
					<LI>ui-layout-button-pin-west-down</LI>
				</UL>
				<P>
					These classes can be used to change the background-image via CSS,
					as is done in the <A
						href="http://layout.jquery-dev.net/demos/complex.html">complex
						demo</A>.
				</P>
			</BLOCKQUOTE>
			<H3 id="Drop-Downs">Working with Drop-Downs and Pop-Ups</H3>
			<P>
				When a layout is created, each pane becomes a container for all the
				elements inside it. Elements that need to 'popup', like a dialog
				box, should be put in the 'body' of the page - <U>not</U> inside one
				of the panes. This allows the popup to <I>overlay</I> all the panes.
			</P>
			<P>
				However, sometimes a popup or drop-down (like a 'menu') needs to
				originate from <I>inside</I> a pane. For example, the north-pane may
				hold a toolbar with drop-down menus that need to appear <I>over-top</I>
				of the panes below. For this to work, the pane containing the
				drop-down element must:
			</P>
			<OL>
				<LI>have the style 'overflow: visible', and</LI>
				<LI>have a 'stack-order' that is higher than the panes below</LI>
			</OL>
			<P>
				<B>NOTE</B>: The z-index of the popup element itself is irrelevant <I>outside</I>
				the pane. It is the pane that contains the popup element that must
				be 'above' the adjacent panes. Since pane-animations change their
				z-indexes, setting z-index in your CSS <U>will not work</U>.
			</P>
			<P>
				If you have a layout where only 1-pane has popups, then just put
				that pane '<B>last</B>' in your HTML mark-up, and give it the style:
				'overflow: visible'. This will make all popups and drop-downs from <I>that
					pane</I> work normally.
			</P>
			<P>
				However, if you have a layout with drop-downs or popups in <I>multiple
					panes</I>, then this pair of layout utilities provide a solution...
			</P>
			<H5 class="withNext">
				<B>allowOverflow(</B> elem_or_pane <B>)</B>
			</H5>
			<H5>
				<B>resetOverflow(</B> elem_or_pane <B>)</B>
			</H5>
			<BLOCKQUOTE>
				<P>
					The <B>allowOverflow</B> utility raises a pane's z-index so popups
					work properly.
				</P>
				<P>The 'elem_or_pane' parameter can be either:</P>
				<UL>
					<LI>The 'pane element', or a 'decendant element' of the pane,
						that contains the popup, or</LI>
					<LI>The 'name' of the pane containing the popup, ie: "north",
						"south", "east", "west" or "center"</LI>
				</UL>
				<P>
					The <B>resetOverflow</B> utility puts the pane back to its normal
					z-index. It accepts the same parameter as allowOverflow, and <I>should</I>
					be called when the popup closes. However, when allowOverflow is
					called, all other panes are <I>automatically</I> reset anyway.
				</P>
				<P>Examples:</P>
				<CODE>
					<PRE>
						<I>// using a 'list' mouse-over event</I>
&lt;ul onmouseover="myLayout.allowOverflow(this)" 
  onmouseout="myLayout.resetOverflow(this)"&gt;

<I>// using the 'pane' mouse-over event</I>
&lt;div class="ui-layout-north"
  onmouseover="myLayout.allowOverflow(this)")&gt;

<I>// called from the code that initiates a popup</I>
myLayout.allowOverflow('north');
showMyPopup();
</PRE>
				</CODE>
				<P>
					The allowOverflow method can also be <I>automatically attached</I>
					to panes using the <B>showOverflowOnHover</B> option. This makes
					things more automatic, but there are some scenarios where you need
					to control this from in your code.
				<P>
					SEE the <A href="http://layout.jquery-dev.net/demos/simple.html">simple
						demo</A> for working examples of pop-ups and drop-downs.
				</P>
				<P>
					<B>NOTE</B>: Using allowOverflow on a 'scrolling pane' causes the
					scrollbar to disappear and the pane contents to 'overflow' on top
					of the pane below. This can be seen by hovering the pop-up in the
					East pane of the <A
						href="http://layout.jquery-dev.net/demos/simple.html">simple
						demo</A>.
				</P>
			</BLOCKQUOTE>
		</DIV>
		<!-- end collapsible -->
		<P>&nbsp;</P>
		<HR>

		<P class="bold">
			<A onclick="return openAllSections()" href="#">Open All Sections</A>
			&nbsp; <A onclick="return closeAllSections()" href="#">Close All
				Sections</A><BR>&nbsp;
		</P>
	</DIV>
	<!--
	=======================
	*	TABLE OF CONTENTS  *
	=======================
-->
	<DIV style="display: none;" class="ui-layout-west">
		<DIV class="header">Contents</DIV>
		<DIV class="ui-layout-content">
			<UL id="TOC">
				<LI><A href="#top">UI Layout</A></LI>
				<LI><A href="#Depends_on">Depends on</A></LI>
				<LI><A href="#Browsers">Supported Browsers</A></LI>
				<LI><A href="#Demos">Demos</A></LI>
				<LI><A href="#Example">Example</A></LI>
				<LI><SPAN class="tocBtn"></SPAN><A href="#Terminology">Terminology</A>
					<UL>
						<LI><A href="#Container">Container</A></LI>
						<LI><A href="#Panes">Panes</A></LI>
						<LI><A href="#Pane_Spacing">Pane Spacing</A></LI>
						<LI><A href="#Resizer">Resizer / Resizer-bar</A></LI>
						<LI><A href="#Slider">Slider / Slider-bar</A></LI>
						<LI><A href="#Toggler">Toggler / Toggler-button</A></LI>
					</UL></LI>
				<LI><SPAN class="tocBtn"></SPAN><A href="#Properties_Methods">Layout
						Properties &amp; Methods</A>
					<UL>
						<LI><A href="#Properties">Properties</A></LI>
						<LI><A href="#Methods">Methods</A></LI>
						<LI><A href="#Utility_Methods">Utility Methods</A></LI>
					</UL></LI>
				<LI><SPAN class="tocBtn"></SPAN><A href="#Options">Options</A>
					<UL>
						<LI><A href="#Sub-Key_Format">Sub-Key Format for Options</A></LI>
						<LI><A href="#List_Format">List Format for Options</A></LI>
						<LI><A href="#Option_Specificity">Option Specificity</A></LI>
						<LI><A href="#Selector_Options">Selector Options</A></LI>
						<LI><A href="#Class_Options">Class Options</A></LI>
						<LI><A href="#List_of_Options"><B>List of Options</B></A></LI>
					</UL>
				<LI><SPAN class="tocBtn"></SPAN><A href="#Layout_State">Reading
						the Layout-State</A>
					<UL>
						<LI><A href="#Logic_Vars">Auto-Generated Logic-vars</A></LI>
						<LI><A href="#Reading_Size">Reading Pane-Size</A></LI>
						<LI><A href="#Saving_State">Saving the Layout State</A></LI>
					</UL></LI>
				<LI><SPAN class="tocBtn"></SPAN><A href="#Callback_Functions">Using
						Callback Functions</A>
					<UL>
						<LI><A href="#Callback_Parameters">Callback Parameters</A></LI>
					</UL>
				<LI><SPAN class="tocBtn"></SPAN><A href="#Style_Reference">Style
						Reference</A>
					<UL>
						<LI><A href="#Generated_Classes">Auto-Generated Classes</A></LI>
						<LI><A href="#Resizing_Classes">Classes Added During
								Resizing</A></LI>
						<LI><A href="#Resizer_Graphics">Resizer &amp; Toggler
								Graphics</A></LI>
						<LI><A href="#Custom_Button_Classes">Custom Button
								Classes</A></LI>
					</UL></LI>
				<LI><A href="#Auto-Generated_IDs">Auto-Generated IDs</A></LI>
				<LI><A href="#Content-Scrolling">Content-Scrolling <SPAN
						style="font-size: 0.8em; white-space: nowrap;">&nbsp;(Headers
							&amp; Footers)</SPAN></A></LI>
				<LI><SPAN class="tocBtn"></SPAN><A href="#Utilities">Special
						Utility Methods</A>
					<UL>
						<LI><A href="#Custom_Buttons">Creating Custom Toggler
								Buttons</A></LI>
						<LI><A href="#Drop-Downs">Working with Drop-Downs and
								Pop-Ups</A></LI>
					</UL></LI>
			</UL>
		</DIV>
	</DIV>
</BODY>
</HTML>
